過去バージョン

figure 要素とは

<figure> は HTML5 で追加された意味タグ (semantic element) です。本文から独立した図表・画像・コードリスト・引用・動画などをひとまとまりにマークアップし、必要に応じて <figcaption> でキャプションを付けるために使います。

W3C の定義では「本文から切り出して別ページに移動しても、本文の意味が壊れない自己完結したコンテンツ」を表すとされています。「本文に番号付きで参照される図」がイメージとして近いです。

基本構文

<figure>
  <img src="chart.png" alt="2025年の売上推移グラフ">
  <figcaption>図1: 2025年の四半期別売上推移</figcaption>
</figure>

<figcaption> は <figure> の先頭または末尾に 1 つだけ置きます。省略しても文法的には OK で、その場合はキャプションなしの図扱いになります。

使える中身のバリエーション

画像

<figure>
  <img src="diagram.svg" alt="システム構成図">
  <figcaption>図2: マイクロサービス構成図</figcaption>
</figure>

コードリスト

<figure>
  <pre><code>function hello() {
  console.log("Hello, World!");
}</code></pre>
  <figcaption>リスト1: 最小の JavaScript 関数</figcaption>
</figure>

引用

<figure>
  <blockquote>
    <p>Talk is cheap. Show me the code.</p>
  </blockquote>
  <figcaption>&mdash; Linus Torvalds</figcaption>
</figure>

複数画像のグループ

<figure>
  <img src="before.png" alt="リファクタ前のコード">
  <img src="after.png"  alt="リファクタ後のコード">
  <figcaption>図3: リファクタリング前後の比較</figcaption>
</figure>

img をそのまま置くのとどう違うか

機械的なレンダリング結果は変わりませんが、意味付けが変わります。

figure を使うべきでないケース

• 装飾画像 — ヘッダー背景、ボタンアイコンなど。<div> や CSS 背景に。
• 本文と密結合した画像 — 「次の画像のように〜」と本文がその画像に依存している場合は、独立性がないので figure は不適切。
• レイアウト目的のラッパー — 中央寄せしたいだけなら <div class="center"> で十分。

よくある質問

Q: figcaption を画像の上に置きたい
A: <figure> 内の先頭に置けば構造的に上、末尾に置けば下になります。仕様上はどちらも 1 つだけ許可。

Q: img の alt と figcaption の使い分けは？
A: alt は画像の代替テキスト（画像が表示できない時に何が描かれているか）、figcaption はキャプション（「図1: 〜」のような本文中の説明）。役割が違うので両方書きます。

Q: figure をネストできる？
A: 仕様上は禁止されていませんが、独立した図の中に別の独立した図、という構造はほぼ意味を成さないので非推奨です。