figure

The HTML <figure> element groups self-contained content such as an image, diagram, chart, or code sample. An optional <figcaption> can explain what the figure represents.

What you will learn

How figure groups content that can stand on its own
How it works with figcaption
How to distinguish a meaningful figure from a layout-only wrapper

Basic example

<figure>
  <img src="architecture.png" alt="Three layers of the application">
  <figcaption>Figure 1: The application layers.</figcaption>
</figure>

A figure is related to the surrounding content, but it can be moved to another place, such as an appendix, without losing its identity. The caption belongs to the figure rather than being a separate heading.

More than images

Use figure for a chart, code sample, quotation, or other self-contained content when it has a clear relationship with the surrounding explanation.

<figure>
  <pre>const total = price * quantity;</pre>
  <figcaption>Example: calculate the total price.</figcaption>
</figure>

figure is not a generic layout box

If a group exists only to apply CSS or arrange elements, use a neutral container such as div or a more meaningful structural element. Semantic elements should describe the content, not just its visual position.

Accessibility notes

Give images useful alt text even when a figure has a caption.
Use figcaption for context, source, or interpretation that should be visible to everyone.
Do not repeat a long identical description in both alt and the caption.
Make sure the surrounding text still explains why the figure matters.

Common mistakes

Wrapping every image in figure even when it has no independent meaning.
Using a caption as a replacement for image alternative text.
Putting figcaption outside the corresponding figure.
Using figure only because its default margin looks useful.