Question

I currently have an ordered list that I want to markup using the new HTML 5 attributes. It looks like this:

<ol class="section">
  <li class="article">
    <h2>Article A</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article B</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article C</h2>
    <p>Some text</p>
  </li>
</ol>

It seems the only way to keep the list AND use HTML 5 tags is to add a whole bunch of unnecessary divs:

<section>
  <ol>
    <li>
      <article>
        <h2>Article A</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article B</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article C</h2>
        <p>Some text</p>
      </article>
    </li>
  </ol>
</section>

Is there a better way to do this? What are your thoughts?

Answer 1

If you’re using a list to add chronological order semantics to weblog posts, and as @Tomas mentioned each article is self-contained, then your code is ok (I’d remove the containing section though — it’s untitled and unnecessary).

However as you say there’s some extra markup. If you want to use less HTML, you can remove the list. You may think that you’ve then lost the chronological order semantics, but you can actually do this better using time with the pubdate attribute. This would look like:

<article>
    <header>
        <h2>The lolcat singularity</h2>
        <time datetime="2010-05-24" pubdate="pubdate">Today</time>
    </header>
    <p>…</p>
</article>
<article>
    <header>
        <h2>The internet is made of cats</h2>
        <time datetime="2010-05-23" pubdate="pubdate">Yesterday</time>
    </header>
    <p>…</p>
</article>

If you’re making a list of articles on the homepage, you’ll have to decide if the content stands alone (i.e. would you make a feed out of the article summaries). If so then the above code is still fine. If the summaries are too short to be self-contained, then you could choose to use a list, but at that stage you’re not dealing with “article” semantics, so your original classnames would be a little misleading:

<ol class="article-list">
    <li>
        <h2>Article A</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article B</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article C</h2>
        <p>Some text</p>
    </li>
</ol>

and select using .article-list li {} or .article-list h2 {} etc.

Fwiw I actually ended up using an ordered list containing article with time pubdate — the semantic belt and suspenders approach. I’m now wondering if I should remove the list myself 🙂 You can also get carried away with hAtom, but note that ARIA’s role="article" shouldn’t be used on list items.

While HTML5 is an evolution, you’ll get the most benefit from throwing out your old code, starting from the content and a good guide to the spec, and marking stuff up from scratch. HTH!