HTML5 возобновить семантику - PullRequest
Новая
       12

HTML5 возобновить семантику

10 голосов
/ 20 августа 2011

Я работаю над своим резюме и хочу использовать семантику HTML5.Какой лучший семантический способ перечислить мой опыт работы?Информация для каждого опыта работы содержит дату, компанию, название должности и описание.

Я имею в виду два варианта: 

<h2>Experience</h2>
<ul>
  <dl>
    <dt><h3>JobTitle</h3> <span>Company + timeperiod</span></dt>
    <dd>description</dd>
   </dl>
</ul>

Или это семантически более правильно рассмотретькаждый опыт в качестве статьи следующим образом? 

<h2>Experience</h2>
  <article>
    <h3>Jobtitle</h3> 
    <p>description</p>
    <footer>Company + timeperiod</footer>
  </article>

Я хотел бы услышать ваши мысли по этому поводу!

Ответы [ 3 ]

8 голосов
/ 20 августа 2011

Я бы придерживался вложенных определений описательных списков, так как <article> " представляет компонент […], который состоит из автономной композиции […], предназначенной может быть независимо распространяемым или повторно используемым , например, в синдикации".

Вы также удваиваете некоторые вещи, например, вкладываете <dl> в <ul> или имеете заголовок (<h3>) внутри <dt> -элемента. 

<section>
    <h2>Experience</h2>
    <dl>
        <dt>THE JOB TITLE</dt>
        <dd>
            <dl>
                <dt>Company:</dt><dd>THE COMPANY</dd>
                <dt>Period:</dt><dd>
                    <time class="dtstart" datetime="2007-02-01">Feb 2007</time> -
                    <time class="dtend" datetime="2009-09-30">Sep 2009</time>,
                </dd>
                <dt>Description:</dt><dd>
                    DESCRIPTION
                </dd>
            </dl>
        </dd>
        <!-- more jobs here as dt-dd-pairs -->
    </dl>
</section>

whatwg.org: элемент времени

4 голосов
/ 18 декабря 2015

Я делаю это, используя details / summary, а также другие семантические теги, такие как section и header. 

<main>
  <header>
    <h1>Chunliang Lyu</h1>
    <a href="https://chunlianglyu.com/">chunlianglyu.com</a>
    <a href="https://github.com/cllu">github.com/cllu</a>
  </header>
  <section class="education">
    <h2>Education</h2>
    <details>
      <summary>The Chinese University of Hong Kong, <time>2011 - 2016</time></summary>
      Research Area: Entity Retrieval, Natural Language Processing, Knowledge Graph.
    </details>
  </section>
</main>

Одним из преимуществ details является то, что поддерживаетсяВ таких браузерах, как Chrome, можно щелкнуть элемент summary, чтобы переключить отображение соответствующего элемента details.

Я создал небольшое приложение для преобразования текста Markdown в HTML с описанной выше структурой, также включив семантическую разметку с помощьюschema.org.Проверьте мой проект на https://github.com/cllu/Semantic-Resume, и приложение на https://semantic -resume.chunlianglyu.com / .

0 голосов
/ 20 августа 2011

Я бы сделал это так: 

  <section>
     <h2>Experience</h2>
     <article>
         <h3>Jobtitle</h3> 
         <p>description</p>
         <footer>Company + timeperiod</footer>
     </article>
  </section>

Обратите внимание, я также добавил тег раздела. Смотри http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

...