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