Module 3: Links and Media · Lesson 5 of 8
HTML figure and figcaption: Add a Caption to an Image
All lessons in Module 3
Goal: Tie an image to its caption with figure and figcaption.
Learn
A photo in a magazine often has a caption underneath. HTML has a pair of elements (opens in a new tab) for exactly that:
<figure>wraps a self-contained piece of content: an image, a chart, a code sample, even a poem.<figcaption>is its caption. It goes inside the figure, as the first or last child.
<figure> <img src="dog.svg" alt="Biscuit the dog"> <figcaption>Biscuit, after his first swim.</figcaption> </figure>
Why not a plain paragraph under the image? A paragraph isn't connected to anything. The figure ties the caption to its image, so browsers and screen readers know they belong together. The caption doesn't replace alt text. Alt describes the picture; the caption adds context, like who, where or when. Good Alt Text shows how to keep the two from repeating each other.
The short version
<figure>wraps a self-contained piece of content, such as an image, chart, code sample or poem.<figcaption>is the caption. It goes inside the figure as its first or last child.- The figure connects the caption to its content, so browsers and screen readers know they belong together.
- A caption adds context. The image still needs its own alt text.
Example
<figure>
<img src="pancakes.svg" alt="A stack of pancakes">
<figcaption>Grandma's recipe, Sunday morning.</figcaption>
</figure>Your task
Give the summit photo a proper caption:
- Wrap the image in a
<figure>. - Turn the
Photo: ...paragraph into a<figcaption>inside the figure, right after the image. - Keep the image's alt text.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<figure>
<img src="dog.svg" alt="Biscuit, after his first swim">
<figcaption>Biscuit, after his first swim.</figcaption>
</figure>Right
<figure>
<img src="dog.svg" alt="A wet brown dog shaking off water">
<figcaption>Biscuit, after his first swim.</figcaption>
</figure>When alt repeats the caption, screen reader users hear the same sentence twice. Let alt describe and the caption explain.
Wrong
<figure>
<figcaption>Day one.</figcaption>
<img src="mountains.svg" alt="Snowy peaks">
<figcaption>Day two.</figcaption>
</figure>Right
<figure>
<img src="mountains.svg" alt="Snowy peaks">
<figcaption>Day two, above the clouds.</figcaption>
</figure>A figure can have only one figcaption. Content that needs two captions belongs in two figures.
Go deeper
A quick test tells you whether something should be a figure: could it move to an appendix or the side of the page without breaking the text around it? A diagram referred to as "see the chart below" passes. An icon in the middle of a sentence or a decorative background does not, and needs no figure.
Browsers give a figure default margins, about 40 pixels on the left and right, so it looks indented.
Assistive technology treats the figcaption as the name of the figure. Screen readers announce a figure and read its caption, so readers know what the group is about before exploring it.
Captions help search engines too. Google uses the text near an image to work out what the picture shows and when to display it in image results. A caption is the closest, clearest text there is, and Google's image SEO guide (opens in a new tab) mentions captions directly.
People who skim a page often read the headings, images and captions and little else, so captions get read a lot. Put real information in yours. A bare label wastes the spot.
In long articles, number your figures ("Figure 2: ...") and refer to them by number in the text.
Frequently asked questions
How do I add a caption to an image in HTML?
Wrap the image in a <figure> and put a <figcaption> inside it, right before or right after the image: <figure><img src="dog.svg" alt="A brown dog"><figcaption>Biscuit at the lake.</figcaption></figure>. Keep the alt text on the image as well. The caption may come first or last inside the figure, but never in the middle or outside it.
What is the difference between alt text and figcaption?
The alt text replaces the image for people who cannot see it, so it describes what the picture shows. A figcaption is visible to everyone and adds context the picture cannot give: who, where, when or why. Sighted readers see the image and the caption. Screen reader users hear the alt text and the caption. Write the two so they add to each other without repeating. WCAG requires the alt text part as a text alternative for non-text content (opens in a new tab).
Can a figure contain more than one image?
Yes. A figure can hold several images that share one caption, such as a before-and-after pair or a small gallery. It is not limited to images, either: a code sample, a chart, a table or a quotation can be a figure. For a quote, put the <blockquote> inside the figure and the attribution in the figcaption, building on Quotes and Code.