<figure> and <figcaption> | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`<figure>`	8	12	4	5.1	18	5
その他
`html.elements.figcaption` は HTML の要素で、親の figure 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。	8	12	4	5.1	18	5

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は 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

<figure> and <figcaption> の活用

<figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で <figcaption> 要素を使用して表されるキャプションを付けることができます。