<figure> and <figcaption> | Frontend Practical Guide

Overview

The <figure> element groups self-contained content such as images, diagrams, code listings, or tables, usually with an optional <figcaption>.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`<figcaption>`	8	12	4	5.1	18	5
Other
`html.elements.figure` The 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.	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)

HTML

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

image to caption attach. with Figure and figcaption.

co-dblock to caption attachpattern. with figure

de-tatable to caption pattern. with figure

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.

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.