Photograph of rock pool
Part of the Image Basics Reading List
 
 

Dive into the world of plinko casino, designed for speed, privacy, and excitement. Try your luck with adjustable volatility levels.

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