HTML5 semantic article list

Question

I am doing a classic list of articles, and I want to use both figure and time elements:

<li>
   <article>
      <figure>
         <a><img alt="Artile thumnbail"/></a>
         <figurecaption>
             <h3><a>Article Title</a></h3>
         </figurecaption>
      </figure>
      <time pubdate="xxx">xxx</time>
   </article>
</li>

Is this the right way to write this?

Answer 1

The name of the tag is figcaption, not figurecaption. Apart from that, the code looks good - but I wouldn't wrap the elements that much in myself. Why do you need the figure and figcaption elements? It's more semantic without them - the article title isn't actually a caption for the image, but an independent heading. And remember, most images don't need figure.

I would have written it like this:

<li>
    <article>
         <a>
             <img alt="Article thumbnail"/>
             <h3>Article title</h3>
         </a>
         <time pubdate="xxx">xxx</time>
    </article>
</li>

And without those elements, you could combine the <a> elements, and use it for wrapping the <img> and <h3> together.

Answer 2

An article is defined as:

A self-contained composition in a document, page, application, or site, which 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, or any other independent item of content. (source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)

In case of a list of articles you probably shouldn't use the article tag but either the li tag you are using anyway or a div.