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

我会坚持嵌套 定义描述清单,因为<article>" 代表一个组成部分,它由一个独立的组合物组成,该组合物旨在可独立分发或重复使用,例如在联合组织中 ".

你也加倍了一些东西,比如在一个元素中<dl>嵌入一​​个<ul>或者有一个heading(<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:时间元素

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

Answer 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-outlined-algorithm/