<figure>

<figure> groups self-contained content that can be referred to as a unit: an illustration, diagram, quotation, or code sample. Its optional figcaption supplies a caption for the whole figure.

A captioned code sample

A figure need not contain an image. This one groups code and an explanation that remains meaningful outside the surrounding paragraph.

<figure>
  <pre><code>.cards {
  display: grid;
  gap: 1rem;
}</code></pre>
  <figcaption>A grid with space between adjacent cards.</figcaption>
</figure>

figure {
  margin: 0;
  padding: 1rem;
  border: 1px solid #94a3b8;
}
pre {
  overflow: auto;
}
figcaption {
  margin-top: 0.5rem;
}

Content and naming

A figure accepts flow content and at most one caption as its first or last child. The caption can provide an accessible name for the figure. It is not a replacement for an image’s alt; the image still needs a text alternative appropriate to its purpose.

Use a figure when its contents belong together and can be referenced as a unit. A decorative image inside an ordinary paragraph does not need a figure merely because it is an image.

Adapt the example

Move the caption before the code to put it first. Its relationship remains intact. For an image figure, use a meaningful img alternative and a caption that adds context rather than blindly repeating the same text.

Sources and browser support

MDN: figure describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.