Widely available Useful when media or embedded content needs a clear caption or should be treated as one referenced unit.

<figure> and <figcaption>

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

DocumentMediaCaptions

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<figure>
8
12
4
5.1
18
5
Other
html.elements.figcaption

The HTML element represents a caption or legend describing the rest of the contents of its parent figure element, providing the an accessible name.
8
12
4
5.1
18
5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<figure>
  <img src="chart.png" alt="2024年の売上推移グラフ">
  <figcaption>Figure 1: Monthly Sales Trends for 2024</figcaption>
</figure>

Live demo

imagecaption

image to caption attach. with Figure and figcaption.

PreviewFullscreen

co-dsnipet

co-dblock to caption attachpattern. with figure

PreviewFullscreen

tablecaption

de-tatable to caption pattern. with figure

PreviewFullscreen

Use cases

  • Illustrated content

    Wrap images or diagrams with a caption that explains what the reader should notice.

  • Code or example blocks

    Present code snippets or data tables as referenced figures with a meaningful label.

Cautions

  • Not every image needs figure. Use it when the content is a referenced unit or benefits from a caption relationship.
  • A caption should add useful context, not repeat the visible content verbatim without purpose.

Accessibility

  • Captions help all users understand the purpose of media, and they work well alongside alt text rather than replacing it.

Related links