HTML5 resume semantics

Question

I am working on my resume and want to use HTML5 semantics. What is the best semantic way to list my work experience? The information for each work experience contains the date, the company, the job title and a description.

I have two options in mind:

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

Or is it semantically more correct to consider each experience as an article as follows?

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

I would love to hear your thoughts on this one!

Answer 1

I would stick to nested definition description lists, as the <article> "represents a component […] that consists of a self-contained composition […] that is intended to be independently distributable or reusable, e.g. in syndication".

You are also doubling some things, like nesting the <dl> into an <ul> or having an heading (<h3>) inside of a <dt>-element.

<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: the-time-element

Answer 2

I am doing this using details/summary, as well as other semantic tags like section and 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>

One advantage of details is that on supported browsers like Chrome, you can click the summary element to toggle display of the corresponding details element.

I have made a small app to convert Markdown text to HTML with above structure, also enabling semantic markup with schema.org. Check my project at https://github.com/cllu/Semantic-Resume, and the app at https://semantic-resume.chunlianglyu.com/.