HTML で画像を貼り付けるときは img 要素を使うというのは、自明の理であることは確定的に明らかであると思います。
その img 要素、
何も考えずに div 要素で囲っていませんか？
実は、img 要素を囲うのに適した要素の１つとして
figure 要素というやつがいます！
今回はそんな figure 要素について、
まとめてみることにしました。
- figure 要素の使い方
- figure 要素を使うときの考え方
目次
figure 要素とは
「figure」という単語は馴染み深いようで、でもそんなによく知らない、なんだかふわっとしたイメージがありませんか？
そんなわけで、
まずは単語の意味からみていきたいと思います。
figure という単語について
読みは『フィギュァ』って感じ。
意味は「形」的な何かですね。
単語
figure：(輪郭のはっきりしている)形、図、さし絵（weblio）
現代人の私たちが「フィギュア」と聞くと、パッと、美少女フィギュアとかポケモンのフィギュアとかいわゆるフィギュアを思い浮かべちゃいますよね！これは人の“形”やキャラクターの“形”という感じの意味で使われているものと考えられます。
あとは、「フィギュアスケート」も思い浮かぶかもしれません。これは、フィギュアスケートは本来、氷上に図形を描く競技であることに由来しているそうです。
そして「Figure」とは、意味のある図のこと！
単語の意味には「形」だけではなく、
「図」や「さし絵」という意味も含まれています。この部分がまさに figure 要素にピッタリの意味なのですね！
例えば、論文などではしばしば『Figure を入れる』というような使い方をされます。これは、その「図」がただの飾りではなく意味を持つグラフや写真の“かたまり”として重要な役割を果たしているということを表しています。
HTML における figure 要素の役割
もうおわかりですね！
HTML5 では、セマンティック（意味づけ）を大事にするマークアップが推奨されるので（そして、その方が美しくてカッコいいので！）、図や写真を単なる装飾としてではなく、意味のある構造として表現する写真や図には意味のある図、つまり「figure」要素というのが最適ということなのだ！
さらに、figure という単語の持つ広い意味合いから、「コードスニペット」や「引用」を囲うのにも figure 要素が使われます。
figure 要素を使用するという行為は、写真やコードをセマンティックに沿ってマークアップするという、まるでちっちゃな論文を書いているような気分になります！
そして、
なんだかちょっとだけ賢くなった気になれます！
私たちも、ちっちゃな論文を常日頃から書いているんだっ！ってつもりで鼻高々に自信をもってコーディングして、生きていきまひょ笑。そうすることで少し楽しく、ポジティブに、そして誇り高く Web 制作に向かい合うことができるような気がします。
figure 要素の使い方
前提として、
以下の説明では、画像（img 要素）を挿入するケースをもとにお話しを進めたいと思います。
figure 要素の基本的な考え方
figure 要素の使い方の基本的な考え方は前項でまとめている通り、意味のある図として挿入します。
文章の流れの中で補足的な内容としつつも、その図を“単体”で見ても自己完結したコンテンツ（self-contained）であることが望ましいです。ただし、装飾画像や広告バナーなどの文脈にまったく関係のないコンテンツには、figure 要素は不適切です。
塩梅が難しいと思われるかもしれませんが、堅苦しく考えずに、『文脈に関係ない図には figure 要素で囲わない』くらいシンプルな考えでいいのかなぁと、私は思います。。まぁ、意味ある構造なんて最終的にはこじ付けでどうとでもなりますしね！
まずは、figure 要素を使わないケースを把握！
実際のところ、画像を挿入する際に figure 要素を使うケースよりも、figure 要素を使わないケースの方が限定的な気がするので、そちらの代表的な例を、まず紹介します。
画像をテキストのインラインで文中に挿入するケース
<p>このラーメンは<img src="text-shioaji.jpg" alt="塩味">です</p>見出しなどのテキストを画像で代替する場合も同じような考え方ですね！
シンプルなリンクボタンとして挿入するケース
<nav>
<a href="https://www.〇〇.com/">
<img src="btn-home.jpg" alt="ホームページへ">
</a>
<a href="https://www.〇〇.com/profile/">
<img src="btn-profile.jpg" alt="プロフィールページへ">
</a>
<a href="https://www.〇〇.com/contact/">
<img src="btn-contact.jpg" alt="お問い合わせページへ">
</a>
</nav>このようなシンプルなナビゲーションリンクの画像は、補足的なコンテンツとは言えないため、figure 要素を使う必要はありません。
反対に、
補足情報を提供する目的や、視覚的に内容を強調する目的がある場合は figure 要素を使うべきです。特にキャプションを付けて、画像の意味を説明する場合に有効です。
身近な例としては、「関連記事リンク」などのリッチなリンクボタンがイメージしやすいかもしれませんね。画像はリンクの一部でありながら、それぞれのリンク先を説明・補足する役割を持っています。キャプション（figcaption 要素）によって、リンク先の内容を視覚的およびテキストで補強しているため、figure 要素を使用するのがよいかもしれません。
なんとなくつかめましたか？
初心者のうちは、
『figure 要素を使わないケース』以外は、『基本的に figure 要素を使う』という楽天的な感じで使っていくのが、とっつきやすいと思います！そして、経験を積んでいけばきっと、ケースごとに適切な判断もできるようになるでしょう！
img 要素を figure 要素で囲う基本ケース！
お待たせしました！
基本的な figure 要素の使用のコード例を見ていきましょう！
<figure>
<img src="shio-ramen.jpg" alt="塩ラーメン">
</figure>簡単ですね！
今まで div 要素を使っていた人は、その代わりに figure 要素にするという感覚ですね！これにより画像が「意味のある図」としてセマンティック的に解釈されます！
キャプションを付けることも可能！
figure 要素の大きな特徴として、キャプション（説明文）を付けることができます！これには、figcaption 要素を使用します。
<figure>
<img src="shio-ramen.jpg" alt="塩ラーメン">
<figcaption>とってもヘルシーな塩ラーメン（1438kcal）</figcaption>
</figure>
ヘルシーですね！
figcaption 要素は、figure 要素の子要素として記述します。そして最初の figcaption 要素がそのコンテンツ（figure 要素）のキャプションとして扱われます。
figcaption 要素の位置は、先か後かどちらでも問題ありません。先に説明したいか、後で説明したいかによって、位置を決めましょう！
当然、キャプションが不要な場合は、figcaption 要素を省略しても問題ありません。
figure 要素を使う判断のポイント
・補足的なコンテンツであり、独立して意味が通じる画像かどうかを考える。
・文脈に密接に関連する画像（例：本文中のアイコンやインライン画像）は、figure 要素ではなく img 要素のみで十分です。
img 要素以外のケースをいくつか紹介！
さて、
これまでの説明では、画像（img 要素）を挿入するケースとして紹介しましたが、figure 要素の子要素には「画像や図」に限らず、「コードスニペット」や「引用」、「詩」なども入れることが可能なのです。その基本的なコード例をいくつか紹介します！
ただし、
W3C や MDN などの権威あるサイトで紹介はされているものの、画像（img 要素）以外で、figure 要素を実際に採用している Web ページを見つけることができませんでした。
ひょっとしたら実用的ではないのかもしれませんので、参考程度に見ていただけたら幸いです。
「コードスニペット」
Web ページにソースコードを表示させるには pre 要素を使用します。
<figure>
<figcaption>ハローワールド見出し：</figcaption>
<pre><code><h1>Hello, World!</h1></code></pre>
</figure>「引用」
引用は、blockquote 要素を使用します。figcaption には引用元などを入れると良いです。
<figure>
<blockquote>
<p>私は、自分が何も知らないことを知っている。ただそれが私の知恵のすべてである。</p>
</blockquote>
<figcaption>– ソクラテス</figcaption>
</figure>引用元サイトは、cite 要素を使う場合もあり、記述には流派がいくつか存在するかもしれません。一番しっくりくるやり方を見つけましょう。
「詩（ポエム）」
詩は、普通に p 要素で記述します。figcaption には作者の名前など入れると良いですね！
<figure>
<p>六畳で<br>パソコンカチャカチャ<br>息白し</p>
<figcaption>作者：MATSUDAI</figcaption>
</figure>また、詩を引用する場合は、前述の「引用」と同じくきちんと blockquote で囲いましょう！
「テーブル」
テーブルは table 要素を使用します。
<figure>
<figcaption>ラーメンの種類とカロリー：</figcaption>
<table>
<thead>
<tr>
<th>種類</th>
<th>カロリー</th>
</tr>
</thead>
<tbody>
<tr>
<td>醤油ラーメン</td>
<td>600 kcal</td>
</tr>
<tr>
<td>塩ラーメン</td>
<td>550 kcal</td>
</tr>
<tr>
<td>味噌ラーメン</td>
<td>700 kcal</td>
</tr>
</tbody>
</table>
</figure>まとめ
画像（img 要素）を入れるときは『（初心者のうちは）基本的に figure 要素で囲う』という心構えでコーディングをすることでセマンティック（意味づけ）なマークアップに近づけることが可能です！経験を積むことで、適切に使い分ける判断が身につくでしょう！
そして、次のような場合は、figure 要素を使わないことが一般的です。
・画像をテキストにインラインで挿入する場合
・シンプルなリンクボタンとして挿入する場合
こうしたケースでは、特に補足的なコンテンツとして意味を持たないため、figure 要素は不要ということです。経験を積むことで、適切に使い分ける判断が身につくでしょう！
figure 要素の意義としては、
写真や図、グラフなど、意味のある構造として表現する図を適切にマークアップするための要素です。そして、この要素は、自己完結型（self-contained）コンテンツを囲むために使われ、文脈的に関連がありながらも独立して理解できる内容にするのがよいです。
また、
画像（img）要素以外にも「コードスニペット」や「引用」を囲うのにも figure 要素が使われます。その場合は、Web サイトの方針やデザインに応じて、figure 要素を使うかどうかを決めるとよいでしょう。
参考・出典
・W3C. 「4.4.12 The figure element」. https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element, 2024年12月16日閲覧。
・MDN. 「<figure>: キャプションが付けられる図要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure, 2024年12月16日閲覧。
・weblio. 「figureとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/figure, 2024年12月16日閲覧。
・天才英単語. 「self-containedの意味・覚え方・発音」. https://tentan.jp/word/self-contained, 2024年12月17日閲覧。
