figure 要素は「画像やコードなど“ひとかたまりの図”の箱」
まずイメージからいきます。
<figure> は、
「画像・図・コード・表など、“ひとつの図として意味を持つかたまり”を包む箱」
です。
単なる <div> と違うのは、
「これは図（figure）ですよ」という“意味”が付いていること。
写真＋キャプション
グラフ＋説明文
コード例＋タイトル
こういう「メインのコンテンツに付随する図」を
ひとまとめにするのに向いています。
figure と figcaption の基本セット
一番よくあるパターン：画像＋キャプション
<figure> は、たいてい <figcaption> とセットで使います。
<figure>
<img src="coffee.jpg" alt="カップに注がれたホットコーヒー">
<figcaption>朝に飲むホットコーヒー</figcaption>
</figure>
ここでの役割はこうです。
<figure>
「これは 1 つの図ですよ」という箱
<img>
図の本体（画像）
<figcaption>
図のキャプション（説明・タイトル）
ブラウザ的には、
「この画像とこの説明はセットなんだな」と理解されます。
CSS で見た目を整えると、
本当に“図とキャプション”っぽくなります。
figure {
margin: 1.5rem 0;
text-align: center;
}
figcaption {
font-size: 0.9rem;
color: #666;
margin-top: 0.5rem;
}
figure が「ただの div」と違うところ
意味があるから、機械にも伝わる
同じことを <div> で書くとこうなります。
<div class="photo">
<img src="coffee.jpg" alt="カップに注がれたホットコーヒー">
<p>朝に飲むホットコーヒー</p>
</div>
見た目は CSS でどうにでもできますが、
HTML 的には「これは図です」という情報がありません。
一方、<figure> を使うと：
<figure>
<img src="coffee.jpg" alt="カップに注がれたホットコーヒー">
<figcaption>朝に飲むホットコーヒー</figcaption>
</figure>
ブラウザ・スクリーンリーダー・検索エンジンにとって、
「これは 1 つの図であり、その説明が figcaption だ」
と意味がはっきり伝わります。
“意味のある箱”を使うことで、
人間にも機械にも構造が伝わりやすくなる
これが <figure> を使う大きな価値です。
画像以外にも使える：コード例・表・イラストなど
コード例＋説明を figure で包む
<figure>
<figcaption>JavaScript でボタンにクリックイベントを付ける例</figcaption>
<pre><code>
const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
alert("クリックされました");
});
</code></pre>
</figure>
ここでは、
「コードブロック＋その説明」を
1 つの“図”として扱っています。
グラフ画像＋説明
<figure>
<img src="sales-graph.png" alt="2023 年の売上推移を示す折れ線グラフ">
<figcaption>図1. 2023 年の売上推移。夏に大きく売上が伸びている。</figcaption>
</figure>
「図1.〜」のようなキャプションを付けると、
レポートや技術文書っぽい構造になります。
figcaption の位置と役割をもう少し深掘り
figcaption は figure の“タイトル・説明”
<figcaption> は、
「この図は何なのか？」を説明するための要素 です。
位置は、<figure> の最初か最後に置きます。
上に置くパターン：
<figure>
<figcaption>朝のコーヒーとノート PC</figcaption>
<img src="coffee-laptop.jpg" alt="コーヒーの横にノート PC が置かれている写真">
</figure>
下に置くパターン：
<figure>
<img src="coffee-laptop.jpg" alt="コーヒーの横にノート PC が置かれている写真">
<figcaption>朝のコーヒーとノート PC</figcaption>
</figure>
どちらでも OK ですが、
「上にタイトル、下に図」か
「図の下にキャプション」か、
デザインや文脈に合わせて選びます。
ポイントは、
alt と figcaption の役割を分けて考えること です。
alt
「画像そのものが何を写しているか」
figcaption
「その図が文脈の中で何を意味しているか」
例：
<figure>
<img src="sales-graph.png" alt="2023 年の売上推移を示す折れ線グラフ">
<figcaption>図1. 夏のキャンペーン期間中に売上が大きく伸びていることが分かる。</figcaption>
</figure>
alt は「グラフの内容」
figcaption は「そこから読み取れるポイント」
という分担になっています。
JavaScript と figure：コンポーネントとして扱いやすい
ギャラリーの 1 アイテムとしての figure
HTML：
<figure class="gallery-item">
<img src="photo1.jpg" alt="ギャラリーの写真 1">
<figcaption>写真 1：海辺の夕焼け</figcaption>
</figure>
CSS：
.gallery-item {
width: 200px;
}
JavaScript で、
ギャラリーのアイテムを動的に生成することもできます。
const data = [
{ src: "photo1.jpg", alt: "ギャラリーの写真 1", caption: "写真 1：海辺の夕焼け" },
{ src: "photo2.jpg", alt: "ギャラリーの写真 2", caption: "写真 2：森の小道" },
];
const container = document.querySelector("#gallery");
data.forEach((item) => {
const figure = document.createElement("figure");
const img = document.createElement("img");
const cap = document.createElement("figcaption");
img.src = item.src;
img.alt = item.alt;
cap.textContent = item.caption;
figure.appendChild(img);
figure.appendChild(cap);
container.appendChild(figure);
});
ここでは、
「1 つの figure が 1 つのギャラリーアイテム」
という構造になっていて、
JS からも扱いやすい“コンポーネント”になっています。
figure を使うかどうかの判断基準
「これは“図として独立して意味があるか？」で考える
<figure> を使うべきか迷ったら、
自分にこう聞いてみてください。
「この画像（またはコード・表）は、
本文から少し離れても“図として”意味が通じるか？」
例えば：
ただの背景画像 → figure にはしない
本文の中の小さなアイコン → figure にはしない
記事中の重要な図・グラフ → figure にする価値が高い
コード例＋説明 → figure にすると構造が分かりやすい
「本文の流れを補足する“独立した図”」
という感覚があれば、<figure> がハマります。
初心者として「figure タグ」で絶対に掴んでほしいこと
<figure> は、
「画像・コード・グラフなど、“ひとかたまりの図”を包む意味のある箱」 です。
中に <figcaption> を置いて「図のタイトル・説明」を書ける
画像だけでなく、コード例やグラフにも使える
alt は「画像そのものの説明」、figcaption は「図としての意味」
単なる装飾画像には使わず、“独立した図”に使う
JS からも「1 コンポーネント」として扱いやすい構造になる
あなたが図や画像を置くときに、
「これはただの飾り？ それとも“図”として意味を持たせたい？」
と一度考えられるようになったら、
もう figure を“オシャレなタグ”ではなく、
“情報構造をはっきりさせる道具”として使えている状態です。