Earlier we displayed an image with <img>. This time, one step further. We’ll learn how to properly pair a photo or diagram with a description (a caption) of “what this image is.” Below the photos in a picture book or the news, there’s a little description in small text, right? That’s the one.
How to write figure
Wrap <img> in <figure>, and inside it add the description with <figcaption>.
<figure>
<img src="/shima.jpg" alt="A long-tailed tit on the snow">
<figcaption>The long-tailed tit, called the snow fairy</figcaption>
</figure>Let’s break that down.
| Tag | Meaning |
|---|---|
<figure> | The “container” that bundles a figure (image) and its description |
<img> | The usual image tag |
<figcaption> | figure caption, the image’s description |
In many browsers, the text of <figcaption> is shown right below the image, as a caption. The point is that it conveys “the image” and “its description” are one group.
How are alt and figcaption different?
You might be thinking, “Wait, wasn’t alt a description too?” Their roles are different.
| Way of describing | What kind of description |
|---|---|
alt | The stand-in text for when the image can’t be shown. For screen readers |
<figcaption> | A caption added to the image that everyone can see |
alt is a description for “people who can’t see it, or times it can’t be shown,” and <figcaption> is a description for “everyone who can see it.” They’re both fine to have—descriptions with different roles.
There’s one more upside to wrapping in <figure>. Just placing an image and its description side by side and declaring them one group with <figure> come across differently to screen readers. When they’re merely side by side, they’re read separately as “an image” and “a different piece of text,” but inside <figure> it comes across as “this description corresponds to this image.” Even though the look is the same, the connection in meaning grows stronger.
You can bundle several images together too
The image you can put inside <figure> isn’t limited to one. If there are two photos you want people to compare, bundle both into a single <figure>, and adding just one <figcaption> is enough.
<figure>
<img src="/shima-summer.jpg" alt="A long-tailed tit in summer plumage">
<img src="/shima-winter.jpg" alt="A long-tailed tit in winter plumage">
<figcaption>A long-tailed tit in summer plumage (left) and winter plumage (right)</figcaption>
</figure>Rather than “making a figure for each image one by one,” it’s “bundle the related images together, and give one description for all of them.” This, too, is a way of writing that only works because figure and figcaption come as a set.
Summary of this lesson
- Bundle an image and its description as a set with
<figure> - Write the description (caption) with
<figcaption> alt(for when it can’t be seen) and<figcaption>(visible to everyone) have different roles
