The figure element can take multiple images

The <figure> element is one of my favorites. We think of it as a semantic wrapper that helps us pair images with captions but it’s much more than that. Did you know that a code snippet can be a figure? Or a poem?

In fact, a <figure> can be any sort of “flow content” which is merely a fancy way of saying “just about every element under the sun.” The spec defines it like this:

Most elements that are used in the body of documents and applications are categorized as flow content.

But I was working on a component that was a simple <div> container holding a set of <img> elements. Anytime I see <div> used as a parent, I ask myself if there’s something more “semantic” we can use. I thought at first that <figure> might be a good fit but was reluctant to use it because I’ve always assumed it’s one image per figure.

<figure>
  <img src="logo.avif" alt="Company 1" ... >
</figure>

<figure>
  <img src="logo.avif" alt="Company 1" ... >
</figure> 

<figure>
  <img src="logo.avif" alt="Company 1" ... >
</figure> 

No, thanks. That’s not even in the “true spirit” of <figure> as I learned by re-reading the spec:

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.

Each of those images is related to another, so I wouldn’t say that each image is “a single unit” from the document’s main flow. The collection is the single unit.

That! That is when I did a double take because, well, isn’t that saying a <figure> can indeed hold more than one image at a time? It is. In fact, the spec provides an example a little further down:

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

It’s the <figcaption> that can only crop up once. Once I realized that “flow content” is really “anything” and that there can be multiple “anythings” in <figure> it all started to come together. The actual example was the sealer, of course!