Question

I’m curious what tag would make the most semantic sense to encapsulate a group of thumbnail images? Does it make sense to use the <figure> tag (reading the html5 spec, it’s not clear)? Or stick with a <div>, or is it considered it’s own <section>?

Normally I’d probably use a div to section it off, but trying to utilize the semantic structure of html5, I was hoping maybe there would be a tag that fits this sort of content better.

Thoughts? Suggestions? All are welcome. Thanks!

Answer 1

From a semantic point of view, using <figure> is probably the best fit. If you check the HTML5 spec, you’ll see that it’s perfectly acceptable to include a series of images within a single <figure> declaration.

Example:

<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>

There is also a similar example shown on HTML5Doctor.com where multiple images (which could just as easily be thumbnails) are listed as children of a single <figure> element.