What is the purpose of the <figure> and <figcaption> elements?

<figure> groups a self-contained piece of content (image, diagram, code listing) together with its caption, which you write inside a <figcaption>.

When an image or diagram has a caption that belongs to it, you want the two to stay bound together semantically — not just visually. The <figure> element is the wrapper for such self-contained content, and <figcaption> holds its caption:

<figure>
    <img src="chart.png" alt="Sales growth chart">
    <figcaption>Figure 1: Q4 sales growth by region</figcaption>
</figure>

Why use it instead of an image with a plain paragraph underneath?

• It gives the pairing semantic meaning — the markup states that the caption describes this figure.
• Screen readers can announce the relationship, so the caption is clearly tied to the image.
• A single <figure> can hold several images under one shared caption.
• It suits not just photos but diagrams, illustrations, and code examples.

Note the division of labour with alt on the <img>: alt is a short substitute for users who can't see the image at all, while <figcaption> is a visible caption for everyone.

Go deeper:

• <figure> with optional caption — MDN — valid content structures and how <figcaption> supplies the figure's accessible name.