figure and figcaption: Images With Captions

Concept

figure marks a piece of self contained content that the surrounding text refers to but which could be moved elsewhere - to a sidebar, to an appendix, to the next page - without breaking the flow. Images, diagrams, code listings, charts and pull quotes all qualify.

figcaption attaches a caption to it. The association is structural, which means assistive technology announces the caption as the name of the figure rather than as a stray paragraph that happens to sit underneath.

Syntax

<figure>
  <img src="/images/press.jpg" alt="A hand operated printing press with type set in the bed">
  <figcaption>The 1911 Albion press, in use until 1974.</figcaption>
</figure>

• figcaption must be the first or last child of the figure. Nowhere else.
• A figure may have at most one caption.
• The caption is optional; a figure without one is valid.
• A figure may contain more than one image, a table, a code block or a quotation.

Caption or alt text?

They are different things and both may be needed.

The rule that keeps them from colliding: do not say the same thing twice. If the caption fully describes the image, use alt="" so a screen reader hears the description once. If the caption adds context the image does not show - a date, a source, a name - then both earn their place.

Example: several images in one figure

<figure>
  <img src="/images/before.jpg" alt="The courtyard with cracked paving and no seating" width="600" height="400">
  <img src="/images/after.jpg" alt="The same courtyard with new paving, benches and two trees" width="600" height="400">
  <figcaption>The courtyard before and after the 2025 refurbishment.</figcaption>
</figure>

Example: a code listing

<figure>
  <figcaption>Listing 3: reserving space for an image</figcaption>
  <pre><code>&lt;img src="hall.jpg" alt="An empty hall" width="1600" height="900"&gt;</code></pre>
</figure>

Here the caption comes first, which is the convention for listings and tables, and reads naturally as a label.

Example: a quotation with attribution

<figure>
  <blockquote cite="https://example.org/reports/2026">
    <p>Ridership recovered faster than any other mode.</p>
  </blockquote>
  <figcaption>District Transport Review, <cite>Annual Report 2026</cite></figcaption>
</figure>

This is the standard solution to a real problem: the attribution is not part of the quotation, so it must not sit inside blockquote, but it must stay attached to it. The figure provides the container.

When not to use figure

• A photograph used purely for decoration. Use a plain img with an empty alt, or a CSS background.
• A logo in the header. It is not referred to from the text.
• An image that is inseparable from the paragraph around it, such as an inline icon.
• Every image on the page out of habit. If the content could not be moved without breaking the text, it is not a figure.

Important rules

• figure is block level and may contain block content.
• figcaption first or last, never in the middle.
• One caption per figure.
• The caption becomes the accessible name of the figure, which is why duplicating the alt text is audible and annoying.
• Browsers apply a default margin to figure. Reset it in CSS.

Common mistakes

• Putting the caption in a plain p after the image. It looks the same and carries no association.
• Copying the alt text into the caption, so screen reader users hear it twice.
• Placing figcaption between two images inside the figure, which is invalid.
• Wrapping every single image in a figure, including decorative ones.
• Using figure for layout, as a generic box. That is what div is for.
• Forgetting the default margin and wondering where the extra spacing came from.

Best practices

• Use figure when the content is referred to from the text and could be relocated.
• Decide between alt and caption deliberately so nothing is said twice.
• Put captions above listings and tables, below photographs. It matches how print does it and readers expect it.
• Number figures in long documents and refer to them by number in the prose.
• Include the source in the caption when the image is not yours.

Practice

1. Mark up a photograph with a caption naming the photographer, choosing the alt text so nothing is duplicated.
2. Build a figure holding two images and one caption comparing them.
3. Convert a quotation with a visible attribution into a figure so the attribution sits outside the blockquote.
4. Explain in one sentence when an image should not be in a figure.