What is the semantically correct way to use the `<article>` tag in HTML 5, with `<ol>, <ul>, and <li>`?

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!

Answer 2

According to the last editor's draft:

The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

As I interpret that, your use is perfectly fine semantically, although I really must question your use of a list in the first place. Given that each article is probably much more text than a couple of lines, an unordered list just seems to make things clotty. I imagine you'll "style away" the bullets etc with css, and I can't see why you'd want a bulleted list of articles if the page is displayed with css disabled. I'd suggest merely

<article>
    <h2>The header</h2>
    <p>Some text</p>
</article>
<article>
    <h2>The header</h2>
    <p>Some text</p>
    <p>And maybe another paragraph</p>
</article>