Семантика резюме HTML5

Я работаю над своим резюме и хочу использовать семантику 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>

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

Ответ 1

Я бы придерживался вложенных описаний описания ~~definition~~, так как <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: время-элемент

Ответ 2

Я делаю это с помощью 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/.

Ответ 3

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

  <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/