figure タグはすべての図表を囲めばいいわけではない #HTML5
2014/04/03HTML5 になってから新しく「figure」というタグが追加されていたらしい。
これからは写真などを「pタグ」ではなく「figure」で囲まなきゃなのかな？ と思ったら、どうやらそうカンタンな話ではないようだ。
目次
「figure」「figcaption」タグとは
この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。
via figure 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP
figure は図表を囲むタグだ。具体的にはコンテンツに挿入する画像（写真）や、表、ソースコードなどを囲む。
注釈は figcaption で囲む。
<figure>
<figcaption>
注釈（説明文）
</figcaption>
<img src="" alt=""> //画像
</figure>
figcaption は必ず必要なわけではないけど
注釈をマークアップする figcaption は必ずしも必要ではない。
しかし、ある方が丁寧だろう。
後述するが、figure で囲む要素は記事と切り離しても問題がないモノ、となっている。
「記事と切り離しても問題がない」状態にするためにも注釈はあってしかるべきだろう。
すべての図表を figure で囲むわけではない
注意すべき点がある。
どうやら、コンテンツに挿入する図表を片っ端から figure で囲めばいいわけではないようだ。
画像をなんでも figure 要素でマークアップするのは間違いです。仕様では 「figure 要素は自己完結したもので、ドキュメントのメインのフローから単独のユニットとして参照されるもの」 と説明されています。
整理しよう。
基準は「この図表は記事中になくても成立するか」
figure で囲む要素は、
記事中から参照するんだけど、別に記事中になくても大丈夫だよ。
という要素に対して使うべき、らしいのだ。
例えば、参考画像のリンクだけが用意されていて、それをクリックすることで画像だけが表示されたページが開く。
それでも大丈夫だよ、という要素に figure を使うようだ。
参考記事
使い方についての詳しい考察はこちらの記事にあるので、興味のある人は読んでみるといいだろう。
その他に参考にした記事は以下のとおりだ。
- figure 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP
- HTML5 でやりがちな間違い | WWW WATCH
- figure－HTML5タグリファレンス
- HTML5/グループ化/figcaption要素 図版にキャプションを付ける – TAG index Webサイト
じんないたくみの声
見出しタグさえちゃんと使えているなら、その他のタグのマークアップなんて、そこまでこだわる必要はない気がしている。
こだわりのない人なら、figure タグをそこまで使いこなそうと思わなくてもいいだろう。
しかし、気になる人や、できるかぎり正確なマークアップをしたい人は、きちんと理解しておいたほうが良さそうだ。
最後まで読んでいただき、ありがとうございます
ぜひ、フォローして更新をチェックしてください。
