HTML figure and figcaption: keep an asset with its explanation

Last updated: 5 Oct 20266 min read

tutorial

figure groups self-contained content with an optional caption that explains its role in the surrounding document.

Use it for a real task

A monthly receipts chart has an adjacent caption stating the period and unit. Its image alt carries the key finding for someone who cannot inspect the graphic. The caption provides context for everyone; it should not merely repeat the alt text word for word.

<figure>
  <img src="/media/receipt-volume-2026.webp"
       width="640" height="360"
       alt="Receipt volume peaked in March at 47 records">
  <figcaption>Issued receipts by month, January to April 2026.</figcaption>
</figure>

What the markup guarantees

The media file must exist at the stated path. For a chart with many values, provide the underlying values in nearby text or an accessible data table; a short alt cannot encode an entire series.

Cost and limits

Width and height let the browser reserve space before download. The image still has transfer and decode costs; prepare an appropriate size and format instead of shipping a huge original.

Common Mistakes

Do not use a caption as a replacement for a meaningful alt.
Do not write alt that only says 'chart' or repeats the filename.
Do not put the only data values inside pixels.

Connected lessons

Continue with HTML quotations: keep quoted text and attribution distinct.

Related CSS decisions

CSS object-position: move a thumbnail crop without changing the evidence

html

semantics