HTML5简历语义

Question

我正在写我的简历，我想使用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>

我很想听听你对这个问题的看法！

Answer 1

我使用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的一个优点是，在支持的浏览器上，您可以单击summary元素来切换相应details元素的显示。

我已经做了一个小的应用程序来转换以上结构的超文本标记语言，也启用了schema.org的语义标记。在https://github.com/cllu/Semantic-Resume上查看我的项目，在https://semantic-resume.chunlianglyu.com/上查看应用程序。

Answer 2

我会这样做：

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

请注意，我还添加了section标记。请参阅http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/