figure and figcaption for image semantics

A caption on a website is more than a line of styled text under a photo. When you mark it up correctly the image and its caption become a single semantic unit that screen readers and search engines can read as one piece of content. Doing this well is a small effort that pays off in accessibility and image SEO.

What figure and figcaption are

figure is a block element that groups self-contained content, commonly an image, illustration, diagram, code sample, or quote, together with its optional caption. figcaption is the element that names the caption inside the figure. The pairing means the image never gets its caption orphaned elsewhere on the page:

<figure>
  <img src="skate-team.webp" alt="Winter skate team mid race">
  <figcaption>The senior team after the regional final.</figcaption>
</figure>

Place figcaption as the first or last child of the figure, and keep it visually attached to the image it describes. A caption detached to a separate <p> later in the markup no longer belongs to the image for assistive technology.

Caption versus alt text

People confuse figcaption with the alt attribute, but they serve different jobs.

• alt: describes what the image shows for people who cannot see it. It should say what the image is, not repeat the caption. An informative graph needs a full alt; a decorative quote mark can use empty alt="".
• figcaption: provides a label or context for the image in the surrounding text. It names what the image is about, credits the source, or states the image number, but it is not a substitute for alt.

Run them together: the alt carries the visual content for a screen reader, and the figcaption places the image in the page's narrative. The caption should usually not duplicate the alt, and the alt should not be blank when the image carries meaning.

Markup that works for search engines

The relationship between image and caption is a small but real part of how a search engine joins the media to the surrounding topic. Advertising the caption as part of the image unit, rather than a separate paragraph, keeps the image associated with the text that explains it. Combine it with the other image SEO basics (descriptive filenames, relevant alt text, good supporting copy) for the full picture, covered in the alt and caption guide and the image SEO guide.

Practice

1. Wrap a standalone image and its caption in a figure with the figcaption as the first or last child.
2. Write a meaningful alt that describes the image, and a separate caption that contextualises it.
3. Avoid wrapping decorative images in figure unless they carry a caption worth reading.
4. Keep the caption close to the media in the source order so the relationship survives responsive layout.

The wider structural rules for the elements that surround media live in the semantic HTML guide.