図と説明文をセットで書ける！？意外と知らないfigureタグの正しい使い方

HTMLを書いていて、「この画像に説明をつけたいな〜」って思うこと、ありますよね？
そんなときに使えるのが、今回紹介する <figure>タグ です。

単なる装飾じゃなくて、「この画像にはこういう意味がありますよ〜」って、図とキャプション（説明文）をセットでマークアップできる便利なタグなんです！

figureタグってどんなタグ？
使い方は？まずは基本形！
figcaptionって何者？
他にもこんな使い方ができる！
figureタグを使うメリットまとめ！
まとめ：図と説明はセットが基本！

figureタグってどんなタグ？

ざっくり言うと…

画像・イラスト・動画・コード・表などに説明をつけたいときに使うタグ！

特に、文章の流れからちょっと独立した「図表」や「参考情報」を挿入したいときに便利です。
Webサイトだけじゃなく、ブログや記事でもよく使われています。

使い方は？まずは基本形！

<figure>
  <img src="images/cake.jpg" alt="ショートケーキの写真">
  <figcaption>図1：ふわふわのショートケーキ</figcaption>
</figure>

figcaptionって何者？

<figcaption>（フィグキャプション）は、<figure>の中に入れて、図の説明文を書くタグです。

ポイントは以下のとおり👇

<figcaption>は、<figure>タグの最初か最後に書く
画像や図だけじゃなくて、コードや表にもOK
説明文があることでスクリーンリーダーにも親切＆SEOにも有利

他にもこんな使い方ができる！

コードブロック＋説明の例

<figure>
  <pre><code>console.log("Hello, world!");</code></pre>
  <figcaption>図2：JavaScriptで「Hello, world!」を表示するコード</figcaption>
</figure>

表＋キャプションの例

<figure>
  <table border="1">
    <tr><th>商品名</th><th>価格</th></tr>
    <tr><td>りんご</td><td>¥100</td></tr>
    <tr><td>バナナ</td><td>¥120</td></tr>
  </table>
  <figcaption>図3：フルーツの価格一覧表</figcaption>
</figure>

どちらも、「見せたい情報＋補足説明」がセットになっててわかりやすいですよね！

figureタグを使うメリットまとめ！

メリット	内容
意味づけができる	「これは図です」と伝えられる
アクセシビリティ向上	説明文があることでスクリーンリーダーにも対応しやすい
SEOにも◎	セマンティックな構造が検索エンジンに好まれる
レスポンシブ対応がしやすい	図・画像のブロック要素としてまとめやすい