Figures and captions

Content that comes with a caption

Newspapers, textbooks and reports are full of photos and charts with a short line of text underneath explaining them. HTML has a pair of elements for exactly that:

<figure>
  <img src="https://picsum.photos/seed/library/480/300"
       alt="A bright reading room with long tables and tall windows"
       width="480" height="300">
  <figcaption>The main reading room after the 2026 renovation.</figcaption>
</figure>

• figure wraps a self-contained piece of content: an image, a chart, a diagram, a code listing, a poem, a quotation.
• figcaption is its caption. It must be the first or last element inside the figure.

The pairing matters to more than the eye. Screen readers can announce the caption as belonging to the image, and search engines use it to understand what the image shows.

Caption and alt text do different jobs

People often ask whether an image with a caption still needs alt. It does, because the two say different things:

For a photo captioned "Priya Shah receiving the award, 12 June 2026", the alt might be "A woman in a blue saree shaking hands with a man on a stage". Together they give a blind reader the full picture without hearing the same sentence twice.

If the caption already describes everything someone needs, which happens with some charts, keep the alt short and do not copy the caption into it.

Figures are not only for images

Anything that is referred to from the main text and could, in principle, sit elsewhere (in an appendix, a sidebar, another page) fits in a figure:

<p>The loop in Listing 1 prints the numbers 1 to 3.</p>
<figure>
  <pre><code>for (let i = 1; i &lt;= 3; i++) {
  console.log(i);
}</code></pre>
  <figcaption>Listing 1: a simple counting loop in JavaScript.</figcaption>
</figure>

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

A quotation with its author in a figcaption is a tidy way to credit the source. Several images can also share one figure and one caption, for example a before-and-after pair.

When not to use figure

figure is not a general-purpose box. Do not wrap every image in one: a small icon in a button, a logo in the header or a decorative divider is not a figure. If removing the content would break the sentence around it, it is part of the flow and not a figure. If you just need a container for layout, use a div (coming up in the page-structure lessons).

Styling captions

Browsers indent figures a little by default and show the caption as normal text. With CSS you will later make captions smaller, change their colour, or place them over the image. Keep the HTML focused on meaning; the look comes later.

Large photos slow pages down whether they have captions or not. Compress them first; the Image Compressor runs in your browser.

Common mistakes

• Caption in the wrong place, such as between two images in the middle of the figure.
• Alt text that copies the caption, so screen reader users hear it twice.
• No alt at all because "the caption covers it".
• Using figure for decoration or as a layout wrapper.
• More than one figcaption in a single figure.

Exercise

Write a figure containing two photos side by side, "before" and "after" a room was painted, with one shared caption. Give each image its own alt text describing what it shows.

<figure>
  <img src="room-before.jpg" alt="A small bedroom with faded grey walls and a bare window" width="400" height="300">
  <img src="room-after.jpg" alt="The same bedroom with pale yellow walls and white curtains" width="400" height="300">
  <figcaption>The spare bedroom before and after painting, October 2026.</figcaption>
</figure>