Semantic: should the image in an article list wrapped in figure?

Question

In typical index of articles (like a blog, news portal), such as this:

Should it have the image thumbnail contained in figure, or letting it alone would be fine?

The HTML5 spec defines figure as,

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

But I'm still having problems grasping if it means we should/should not put the image thumbnail inside a figure.

For example, even without the image it won't change the article meaning, so that qualifies. But on the other hand, the thumbnail image isn't exactly self-contained.

In another question @unor suggested that only use figure if the image itself should have a separate caption. But in the spec we see that caption is optional.

Can anyone help me here?

Answer 1

Think of <figure> as something like a chart, or a callout image, or a table, or a code block, that you might see in a news article or tutorial.

If it warrants a caption of any kind, then use <figure> as it has a figcaption element to support that. Lack of caption does not mean that <figure> is not allowed, and <figure> does not require a figcaption. You can

Not all images belong in <figure>. For example, if it gets no alt text or other text description (longdesc, for example), then it probably does not qualify to use <figure> as its absence likely affects nothing.

If the image is simply there as eye candy, perhaps a lead-in image that is primarily decoration, then you can probably just skip using <figure>. Whether your choose to wrap it in a <p> or not (or whatever) is up to you.

Without seeing more context (images, a full page, etc), since you describe it as an index with thumbnails and their absence does not damage the meaning, I think you should ignore <figure>.

There is some relatively recent discussion on this 2010 article: http://html5doctor.com/the-figure-figcaption-elements/