PHASE 2Beginner ~19 min· topic 5 of 7

Topic 2.5

Figures and Captions

In one line

figure wraps self-contained content that the main text refers to (an image, chart, code listing or quotation), and figcaption gives it a visible caption that is tied to it in code.

Think of it like this

A picture in a school textbook. The photo of a volcano has a small line under it: "Figure 3: Mount Fuji, Japan". The text says "see Figure 3". The picture and its caption belong together; you could move both to the next page and the chapter would still make sense. That pair is exactly what figure and figcaption are.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

figure: A self-contained piece (image, chart, code, quote) that the text refers to and that could be moved without breaking the text.
figcaption: The visible caption of a figure. It must be the figure's first or last child.
Caption: A short line of text that explains or credits a picture, chart or listing.
Accessible name: The name a screen reader announces for an element. For a figure it comes from its figcaption.
Alt text: The alt attribute of an image: a text replacement describing what it shows, for people who can't see it.
Self-contained: Makes sense on its own and can be moved elsewhere without breaking the surrounding text.

Step by step

01Start with an image in text

An image referred to by the text, with a credit line underneath written as a plain paragraph. Visually fine, but nothing ties the line to the image.

index.htmlwhole filehtml

<p>The dough doubles in size (see the photo below).</p>
<img src="dough.jpg" alt="A bowl of risen bread dough">
<p>Photo: Asha, after one hour</p>

02Wrap both in figure

Put the image and the caption inside figure, and make the caption a figcaption. Now they are one unit with a real link between them.

index.htmlwhole filehtml

<p>The dough doubles in size (see Figure 1).</p>
<figure>
  <img src="dough.jpg" alt="A bowl of risen bread dough, puffed above the rim">
  <figcaption>Figure 1: The dough after one hour. Photo by Asha.</figcaption>
</figure>

Wrap both in figurediagram

Rendering diagram…

03Use it for code and quotes too

A code listing with a title, or a quotation with its source, is also a figure. The caption carries the title or attribution.

index.htmlwhole filehtml

<figure>
  <pre><code>console.log("Hi");</code></pre>
  <figcaption>Listing 1: The smallest script</figcaption>
</figure>

<figure>
  <blockquote>
    <p>Simplicity is prerequisite for reliability.</p>
  </blockquote>
  <figcaption>Edsger W. Dijkstra</figcaption>
</figure>

04Group several items under one caption

A figure can contain more than one image. Each image still needs its own alt; the single caption explains the group.

index.htmlwhole filehtml

<figure>
  <img src="1.jpg" alt="Dough just mixed, shaggy">
  <img src="2.jpg" alt="Dough after kneading, smooth">
  <img src="3.jpg" alt="Dough after rising, doubled">
  <figcaption>Figure 2: Three stages of bread dough</figcaption>
</figure>

05Decide when it isn't a figure

Run the textbook test. Not every image needs figure.

Decide when it isn't a figurediagram

Rendering diagram…

Try it yourself

1
Move the caption to the top
In the first example, move figcaption above the svg. Predict the second console line, then run: Caption is last child: false, but it's still valid, because first child is also allowed.
2
Reset the default margin
Add figure { margin: 0; } to the first example's CSS and run. The third line now prints 0px and the figure lines up with the paragraph.
3
Check the accessible name
Inspect the first example's figure in Chrome DevTools → Accessibility pane. Its name is computed from the figcaption.

Code & diagrams

A figure with a caption (inline SVG image) New tab

The chart is inline SVG so the example needs no image file. The 40px is the browser's default figure margin.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Caption: Figure 1: Sales per quarter, 2026 (thousands)
Caption is last child: true
Default left margin: 40px

A quote and a code listing as figures New tab

Preview

Press Run to see the page.

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Put the caption in the middle

Place figcaption between two images inside one figure.

terminal

$ W3C validator

── what you'll see ──

Error: Element figcaption not allowed as child of element figure in this context.

Break #2

Use the caption instead of alt

Remove the alt attribute from an image because the figure has a caption.

terminal

$ screen reader

── what you'll see ──

"dough.jpg, image" (it may read the file name)

Myth vs fact

Myth

Every image should be wrapped in figure.

Fact

Only images (or other content) that the text refers to or that need a caption. Logos, icons and decorative images are not figures.

Myth

figure is only for images.

Fact

Charts, code listings, quotations, poems, tables, videos and audio can all be figures.

Myth

With a figcaption, the image doesn't need alt.

Fact

Caption and alt do different jobs. Keep a meaningful alt (or alt="" only if the caption fully describes the image).

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Per the HTML-AAM spec, figure maps to the ARIA role figure, and its accessible name is computed from its figcaption. Screen readers differ in how much they announce: some read the caption on entering the figure, others only when reading through.
▸
When the caption fully describes the image (common in data-heavy reports), WAI guidance allows alt="" on the img to avoid double reading, but only if the figure has the caption. When unsure, keep a short alt.
▸
figure is not a sectioning element: headings inside it still join the page outline. Prefer a figcaption to an h3 for figure titles.
▸
For tables, use the table's own caption element (Phase 3) rather than wrapping in figure, unless you need a caption that covers several tables.

Remember this

1
<figure> marks self-contained content that is referenced from the main flow but could be moved elsewhere (to an appendix, the side, the next page) without breaking the text. It's not only for images: diagrams, charts, code listings, poems, quotations, tables and videos can all be figures.
2
<figcaption> is the figure's caption. It must be the first or last child of the figure, and there can be only one. The browser connects them: the figcaption becomes the figure's accessible name, so a screen reader announces the caption when the user reaches the figure.
3
Caption vs alt text. The image's alt describes what the image shows, for people who can't see it. The caption is visible to everyone and adds context: who, where, when, source, or what to notice. They should not repeat each other: if the caption already says everything, the alt can be short, but it must still be present (Topic 1.7 covers alt rules).
4
When not to use figure. A logo, a decorative divider or an inline icon isn't a figure: it isn't referenced and has no caption. A product photo in a product card is usually just an img. Ask: "Would I number this in a printed book and refer to it?" If yes, it's a figure.
5
A figure can hold several items under one caption, like a gallery of three photos captioned "Figure 4: The three stages of bread dough". It can also wrap a blockquote with the source in the figcaption, which is the recommended way to attribute a quotation (the attribution isn't part of the quote, so it shouldn't go inside the blockquote).
6
By default browsers give figure margins (1em top and bottom, 40px left and right), which is why figures look indented. Reset them in CSS if your design doesn't want them.

Explain it without notes

What kind of content belongs in a figure? Give three examples that aren't photos.

What is the difference between an image's alt text and a figure's caption?

Where can a figcaption go, and how many can a figure have?

Practice

Turn an image of a map with the credit "Map: OpenStreetMap contributors" into a proper figure. Use a fictional file name and good alt text.

Attribute this quote correctly with figure: "Talk is cheap. Show me the code." by Linus Torvalds.

Trade-offs

↔
A figure with a caption is clearer and more accessible, but adds markup and default margins; for simple decorative or card images, a plain img is lighter and correct.

Done when you can

I can decide whether content is a figure with the textbook test.
I can write a figure with a figcaption as first or last child.
I keep alt text and caption doing different jobs.
I can use figure for quotes, code and charts, not only photos.

Command Palette

Words you'll meet

Step by step

01Start with an image in text

02Wrap both in figure

03Use it for code and quotes too

04Group several items under one caption

05Decide when it isn't a figure

Try it yourself

Move the caption to the top

Reset the default margin

Check the accessible name

Code & diagrams

Break it on purpose

Put the caption in the middle

Use the caption instead of alt

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can