Go <figure>?
For my photo journal, I wasn’t sure how to mark up the piece of HTML that makes up a photo element. And re-reading the spec now, I am still not quite sure.
The site features monthly entries with all the selected photos from that month. Each photo element on a page contains the image itself, plus an optional caption. So I thought it makes sense to group them inside a parent tag (for grouping and styling reasons, as well as semantically). And kind of knowing about the <figure> element, it seemed obvious at first to use exactly that, together with <figcaption>. Like so:
<figure>
<img src="photo.jpg">
<figcaption>My Caption</figcaption>
</figure>
But after some research, I decided against this. The page currently marks them up using a less semantic <div> with a <p> for the caption:
<div class="photo">
<img src="photo.jpg">
<p class="caption">My Caption</p>
</div>
And the reasons are the following excerpts from the official spec on the “figure” element (emphasis mine):
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
[…]
A figure element’s contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure.
As far as my site is concerned, the photos themselves are the main content or flow. I’m not illustrating an article. I’m not referencing images. The images are the article.
And the second quote even speaks specifically of “an image sharing site” – which my photo journal is. But that reads as if the spec speaks about a web page that hosts a single figure – i.e. one that can be referenced from somewhere else.
And that’s why I think <figure> is not the appropriate HTML tag for my use case.
Am I interpreting this incorrectly? Is this nitpicky nonsense? I don’t know. But for now, I decided against <figure>.