It appears that a great many developers have jumped on the HTML5 <figure> element and now wrap it around images with abandon, much as people who discover <div> for the first time tend to use it for everything(“Box all the things!”). This is incorrect: <figure> is not appropriate for all images.

The question to ask before using <figure> is:

“If I took this <figure> out of its current context and used it someplace else, would it explain itself?”

Note that <figure> may be applied to content other than images: <video> and <svg> are both potential candidates for <figure>. But always, that central question remains. Logos and any kind of decorative image should not be used inside <figure>.

Bottom line: if you cannot pull the <figure> element and have it be self-explanatory on another page, you shouldn’t be using <figure> for the content. This usually implies that anything inside <figure> will have some sort of caption. Surprise: HTML5 supports this with the <figcaption> element. So for this markup:

<figure>
	<img src="paradise-pool.jpg" style="width: 100%; height: auto;">
	<figcaption>Edge of Virgin Gorda</figcaption>
</figure>

The following CSS could be applied, assuming it is the only use of the element on the page / site:

figure, figure img {
	margin-bottom: 1rem;
	text-align: center;
}

As they are an easily controlled block element, <figcaption> can be used for many purposes: they can be animated, even pushed into 3D.

figcaption? alt?

Developers are sometimes confused between the use of alt and <figcaption>. The easiest way to remember the role of each is:

• alt is a description of the image: it's value should be written as if the user cannot see the image at all.
• <figcaption> is a label for the content of the <figure>. This may be the same as the alt value, but is unlikely to be so.

In other words, paintings might be described and captioned this way:

<figure>
	<img src="sunflowers-blue.jpg" alt="An oil painting of sunflowers with a royal blue background">
	<img src="sunflowers-yellow.jpg" alt="An oil painting of sunflowers in bright yellow">
	<figcaption>Sunflowers series, Vincent Van Gogh</figcaption>
</figure>

If alt and <figcaption> could be reasonably expected to be the same, alt should still be left in place, just set to a null value. (i.e. <img src="yellow-submarine.jpg" alt>).

Photograph is by the incredible Trey Ratcliff, liscensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.