Figure & caption

Grouping content with an associated caption.

A <figure> groups any self-contained unit — image, quote, code, chart — with an optional <figcaption>. Use it instead of a bare <img> whenever the caption adds context.

Image with caption

Northern Lights over the stage at Eurovision 2024 — Northern Lights on stage — Eurovision Song Contest 2024, Malmö.

<figure>
  <img src="/path/to/image.webp" alt="Descriptive alt text">
  <figcaption>Caption describing the image.</figcaption>
</figure>

Quote with attribution

Any application that can be written in JavaScript will eventually be written in JavaScript.

— Jeff Atwood, 2007

<figure>
  <blockquote>
    <p>Any application that can be written in JavaScript will eventually be written in JavaScript.</p>
  </blockquote>
  <figcaption>— Jeff Atwood, 2007</figcaption>
</figure>

Code with caption

.alert {
    padding: var(--pad);
    border: 3px solid var(--color);
}

The base alert rule — all variants override via custom properties.

Accessibility

The caption is associated with the figure for assistive tech, so alt text on images should describe the image; the caption is additional context. Don't duplicate the caption inside alt.