Challenge · easy
HTML figure and figcaption: Add Image Captions
Goal: Turn two loose photos and their captions into proper figures with alt text.
Learn
Use <figure> to group an image with its caption, and put the caption text in <figcaption>. You could put a paragraph under the image instead and it would look about the same. The difference is that nothing ties that paragraph to the picture. The figure section of the HTML standard (opens in a new tab) is where the connection is defined.
Caption and alt text are two separate things. The alt attribute tells someone who cannot see the image what is in it. The caption is for every reader and adds context: a name, a place, a date. You must provide text alternatives under WCAG 2.2 success criterion 1.1.1, Non-text Content (opens in a new tab).
Give each image a width and height too. With those, the browser keeps a gap of the right size while the file loads and the text underneath stays put. Google counts that jumping text as layout shift, one of its Core Web Vitals (opens in a new tab).
The short version
- An image and its caption go in a
<figure>, the caption in<figcaption>. - Alt text describes the picture. The caption adds context. Write both.
- With
widthandheightset, the browser saves room for the image. - Generic divs and paragraphs can usually be swapped for an element that names their job.
Example
<figure>
<img src="pancakes.svg" alt="A stack of pancakes with syrup" width="400" height="300">
<figcaption>Sunday breakfast.</figcaption>
</figure>Your task
Milo and Rex deserve better markup. Fix the page:
- Change each
<div>into a<figure>(2 figures). - Make each caption paragraph a
<figcaption>. - Write alt text for both images that says what the picture shows.
- Give both images
width="400"andheight="300".
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
Frequently asked questions
How do I add a caption to an image in HTML?
Put the image inside a <figure>, then add a <figcaption> as the first or last child: <figure><img src="cat.svg" alt="..."><figcaption>Milo</figcaption></figure>. Browsers and assistive technology now know the caption belongs to that image. Its position and look are up to your CSS. For more examples, see the figure and figcaption lesson.
Is figcaption the same as alt text?
No. Alt text stands in for the image when someone cannot see it, so it describes the picture, and nobody sees it once the image has loaded. A figcaption is on screen for everyone and adds context such as a name or a date. When the caption already says a lot, keep the alt short. Do not copy the caption into it word for word.