figureタグの正しい使い方と実例

HTMLで画像や図表を扱うとき、キャプションを添えて分かりやすくしたい場面は多くあります。
そんなときに便利なのが <figure> タグです。
<figure> は単なる装飾ではなく、「本文の中で独立して参照できるコンテンツ」を表すために使われる意味のあるタグ（セマンティックタグ）です。

本記事では、<figure> タグの基本から、<figcaption> との組み合わせ、実際のコード例、そして注意点までをわかりやすく解説します。

<figure> タグとは？

<figure> タグは、画像や図、コードスニペットなど「本文の中で独立して意味を持つコンテンツ」を表すために使います。
よく 画像＋キャプション の組み合わせで使われますが、それだけに限らず 記事中で説明を補うまとまり を作るときにも活躍します。

基本的な書き方と <figcaption> の使い方

• ・<figure> の中には主に画像やコードなどの「対象コンテンツ」を入れる
• ・<figcaption> を使うとキャプション（説明文）をつけられる
• ・<figcaption> は <figure> の最初または最後に配置可能

例

よくある利用シーン（画像・図表・コード）

・画像＋説明

記事中の画像にキャプションをつけて補足できます。

 

・図表やグラフ

図やグラフの説明文を加えると読者にとって理解がしやすくなります。

 

・コード例

コードスニペットを例として提示する場合にも利用可能です。

<figure> タグを使うときの注意点

• ・装飾目的では使わない（単に枠で囲みたい場合はCSSを使用する）
• ・必ずしも <figcaption> は必要ではない（画像だけの <figure> もOKだが、意味を明確にするならキャプションをつけるのが望ましい）
• ・SEOへの直接効果はないが、可読性・アクセシビリティ向上に寄与する

まとめ

• ・<figure> は「本文中で独立して意味を持つコンテンツ」を表すタグ
• ・<figcaption> を組み合わせることでキャプションを追加できる
• ・画像・図表・コード例など、さまざまなケースで活用可能
• ・過度に装飾目的で使わず、意味のある場面で適切に使うのがポイント