The figure and figcaption elements

Definition

figure groups self-contained content that is referenced from the surrounding document but can move away from the main flow without changing its meaning. figcaption provides the figure's caption and must be its first or last child.

Minimal syntax

<figure>
  <img src="layout.svg" alt="Three columns collapse into one column" />
  <figcaption>Card layout before and after the narrow breakpoint.</figcaption>
</figure>

The image alternative describes the informative image. The caption explains why the figure appears in this document. Those jobs may overlap, but they are not automatically the same text.

When a figure fits

Diagrams, code listings, charts, quotations, tables, and illustrations can be figures when the prose refers to them as a distinct unit. A decorative image or an image that is simply part of a paragraph does not need the wrapper. Do not use figure as a generic card component merely because it accepts varied content.

Browser and accessibility behavior

Browsers give both elements block layout by default. A figure may be exposed as a grouped object, and the caption can contribute its accessible description. The exact announcement varies by browser and assistive technology, so nearby prose and image alternatives must remain clear without depending on a specific spoken prefix.

Common failures

• Every image is wrapped in figure, obscuring which items are genuinely referenced units.
• The caption repeats the image alternative word for word.
• figcaption is placed outside the figure or in the middle of its children.
• A chart caption names the chart but neither caption nor alternative conveys its conclusion.

Verification checklist

Read the paragraph without the figure: the argument should remain coherent, though less supported. Read the figure without surrounding layout: its content and caption should still make sense. Inspect the accessibility tree and test a screen reader, but do not rely on one announcement pattern. Confirm informative images retain useful alternatives and decorative images remain silent.

Check that moving or reusing the figure does not separate it from the paragraph that refers to it. If the order or numbering is meaningful, expose that relationship in visible text rather than relying on proximity or styling alone.