figure タグはすべての図表を囲めばいいわけではない #HTML5

2014/04/03
ブログ / WordPress

Figure figcaption

HTML5 になってから新しく「figure」というタグが追加されていたらしい。

これからは写真などを「pタグ」ではなく「figure」で囲まなきゃなのかな? と思ったら、どうやらそうカンタンな話ではないようだ。

この記事はある程度の HTML についての知識がある人を対象読者としている。

「figure」「figcaption」タグとは

この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。

via figure 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

figure は図表を囲むタグだ。具体的にはコンテンツに挿入する画像(写真)や、表、ソースコードなどを囲む。

注釈は figcaption で囲む。

▼ figure はこんなふうに記述する。figcaption は img の前後どちらにいれても問題ない。
<figure>
	<figcaption>
		注釈(説明文)
	</figcaption>
	<img src="" alt=""> //画像
</figure>

figcaption は必ず必要なわけではないけど

注釈をマークアップする figcaption は必ずしも必要ではない。

しかし、ある方が丁寧だろう。

後述するが、figure で囲む要素は記事と切り離しても問題がないモノ、となっている。

「記事と切り離しても問題がない」状態にするためにも注釈はあってしかるべきだろう。

すべての図表を figure で囲むわけではない

注意すべき点がある。

どうやら、コンテンツに挿入する図表を片っ端から figure で囲めばいいわけではないようだ。

画像をなんでも figure 要素でマークアップするのは間違いです。仕様では 「figure 要素は自己完結したもので、ドキュメントのメインのフローから単独のユニットとして参照されるもの」 と説明されています。

via HTML5 でやりがちな間違い | WWW WATCH

整理しよう。

基準は「この図表は記事中になくても成立するか」

figure で囲む要素は、

記事中から参照するんだけど、別に記事中になくても大丈夫だよ。

という要素に対して使うべき、らしいのだ。

例えば、参考画像のリンクだけが用意されていて、それをクリックすることで画像だけが表示されたページが開く。

それでも大丈夫だよ、という要素に figure を使うようだ。

参考記事

使い方についての詳しい考察はこちらの記事にあるので、興味のある人は読んでみるといいだろう。

その他に参考にした記事は以下のとおりだ。

じんないたくみの声

見出しタグさえちゃんと使えているなら、その他のタグのマークアップなんて、そこまでこだわる必要はない気がしている。

こだわりのない人なら、figure タグをそこまで使いこなそうと思わなくてもいいだろう。

しかし、気になる人や、できるかぎり正確なマークアップをしたい人は、きちんと理解しておいたほうが良さそうだ。