【HTML5】意外と知らないfigureタグの使い方

HTML5から新たに追加された<figure>の要素。使い方がいまいちわからない、なんとなくわかっているけれど使うメリットはよくわからないという方も多いのではないでしょうか。
今回はそんな<figure>の基本的な使い方から混同されやすいタグとの使い分けについてなど、ご紹介いたします。

<figure>とは？

<figure>とはメインコンテンツと関わりがあるものの、自己完結しているコンテンツを囲むタグです。
この説明だけでは具体的にどんなコンテンツを囲むためのタグなのか想像できませんが、簡単に言うとなくてもコンテンツは成り立つけれど、あるとわかりやすくなるコンテンツを囲む時に使うタグという意味になります。
その意味合いからイラスト、写真、図、ソースコードといった説明をよりわかりやすくするために追加するコンテンツを囲むタグとして利用されています。

<figure>が追加された経緯にはHTMLやCSSの技術が進歩したことが関係しており、<img>以外のタグでもイラストや図などの表現ができるようになったことが主な要因です。
検索エンジンは<img>以外のタグのコンテンツはイラストや図だと判別をすることができないため、イラストや図のコンテンツであってもタグが違うことでイラストや図であると認識されない状態になっていました。
そのため、検索エンジンに「これはイラスト、図のコンテンツです。」と認識させるために新たに<figure>が追加されました。

<figcaption>とは？

<figure>の説明とほぼセットで紹介される<figcaption>。
このタグは<figure>で置いたコンテンツのキャプションを書く時に使用します。
<figure>の直下に書くことで、親要素の<figure>の内容にタイトルや説明文といった内容を付けることができます。
<figcaption>の親要素は<figure>でなければならず、<figcaption>単体で使用することはできません。
キャプションの位置はコンテンツの前に配置しても良く、必要であればリンクを入れることも可能です。

<!-- 画像にキャプションを付ける場合 -->
<figure>
	<img src="img.jpg" alt="ペンギンの画像">
	<figcaption>ペンギン</figcaption>
</figure>

<figure>
	<figcaption>ペンギン</figcaption>
	<img src="img.jpg" alt="ペンギンの画像">
</figure>

<!-- 複数の画像がある場合は全体の注釈となります -->
<figure>
	<img src="img.jpg" alt="ペンギンの画像01">
	<img src="img.jpg" alt="ペンギンの画像02">
	<figcaption>ペンギン</figcaption>
</figure>

<!-- リンクを入れる -->
<figure>
	<img src="img.jpg" alt="ペンギンの画像">
	<figcaption>参照：<a href="../index.html">ペンギン</a></figcaption>
</figure>

混同されやすいタグとの使い分け

<figure>のことを理解をしていてもコンテンツによってはこれは<p>や<div>で囲むものではないのか、と迷うことがあると思います。
<figure>で囲む要素との見分け方は消したとしても本文が成り立つコンテンツかどうかということになります。
それを踏まえて囲むコンテンツを分類すると下記のようになります。

<figure>で囲む要素

○本文をわかりやすくするために入れるグラフや図
→あるとわかりやすくなるけれど、なくても文章は成り立つ。
○商品の写真
→商品のイメージが沸きやすくなるものの、なくても商品の説明としては問題ない。
○装飾のイラストや文字
→ページが華やかになるけれど、なくても問題はない。

<p>や<div>で囲む要素

×画像文字の見出し
→見出しのため、<h2>、<h3>といった見出しのタグが適切。
×一式画像で置くコンテンツ
→なくなってしまうと本文がなくなってしまうため、<p>などのタグの方が適切。
△ブログの記事などのアイキャッチ画像
→アイキャッチとしての役割があるため、<p>などのタグの方が適切。

<figure>を正しく扱うとSEO対策としても大変有効なタグです。ぜひご活用ください！