Search code examples
htmlsemantics

Semantically correct HTML5 for grouped <time> list with descendent <time> list


In a list of items grouped by year then listed by date (e.g nesting a list of blog posts inside a list of the years those posts span), should the time element be used for the year grouping (as in the below snippet), or only when labeling the specific date for the descendent list items?

<ol reversed>
  <li>
    <time>2018</time>
    <ol reversed>
      <li><time datetime="2018-05-15">May 15</time> Article4</li>
      <li><time datetime="2018-01-02">Jan 02</time> Article3</li>
    </ol>
  </li>
  <li>
    <time>2017</time>
    <ol reversed>
      <li><time datetime="2017-12-31">Dec 31</time> Article2</li>
      <li><time datetime="2017-10-19">Oct 19</time> Article1</li>
    </ol>
  </li>
</ol> 

Solution

  • According to mdn the time element may represent one of the following:

    1. A time on a 24-hour clock.
    2. A precise date in the Gregorian calendar (with optional time and timezone information).
    3. A valid time duration.

    As for your code, the items grouped by year it more suit to be headers / titles then time elements, so you may want to use this markup instead:

    <section>
      <h3>2018</h3>
      <ol reversed>
        <li><time datetime="2018-05-15">May 15</time> Article4</li>
        <li><time datetime="2018-01-02">Jan 02</time> Article3</li>
      </ol>
    </section>
    <section>
      <h3>2017</h3>
      <ol reversed>
        <li><time datetime="2017-12-31">Dec 31</time> Article2</li>
        <li><time datetime="2017-10-19">Oct 19</time> Article1</li>
      </ol>
    </section>
    

    (Related SO question)

    Good Luck!