figure要素とfigcaption要素使ってる? 記事中の写真を囲むタグの話

ブログの記事には写真やイラストの挿入って欠かせませんが、これらの要素を挿入する際にどんなタグで囲っていますか?

もしブログのコーディングがHTML5に準拠しているなら、figureを状況に応じて使っていくといいんじゃないかというお話です。

figure要素 とは?

figureタグは図表などを示す際に使う要素。
HTML5から加わったタグで、記事本文から参照する写真、イラスト、ソースコードなどを、よりセマンティックに伝えることができます。

ただ、このfigure要素は単独の独立したユニットとして参照されるもので、本文から離した場所に配置しても影響が出ない内容であることという注意点があります。

ちょっとわかりにくいのでもう少しイメージしやすい感じで言うと、技術系書籍によく見られる「図1を参照」とか、「(※表1参照)」みたいな感じで、本文で触れてはいるものの別ページに掲載されている図だとか表だとか、そういう感じ。

こんな感じで本文から参照可能なものをfigureタグでマークアップできるというわけですね。

注釈を付ける figcaption要素

また、figure要素の子要素にfigcaptionというのがあります。
これはfigureタグでマークアップした図表に対してキャプションや注釈を付ける場合に利用するもので、ひとつのfigure要素に対してひとつだけ、それも冒頭か末尾に付けることができます。

<figure>
コンテンツ
<figcaption>コンテンツのキャプション</figcaption>
</figure>

あるいは、

<figure>
<figcaption>コンテンツのキャプション</figcaption>
コンテンツ
</figure>

こんな感じ。コンテンツとして挿れられるのはフロー・コンテンツならなんでもOK。imgだけでなくul>li、tableだって大丈夫です。

正しい意味付けのマークアップ

正直、これまでは何でもかんでもpタグで囲っていたんですよね。
あんまりよろしくないなーとは思いつつもクセがついてしまっていたのもあって、まぁいっかーっていう感じだったんですけど、近日バージョンアップが予定されているWordPress 3.9で、キャプションとギャラリーがHTML5に対応するという話が出ているのを見て、あ、これはそろそろ考えてマークアップしないといかんかも･･･と思った次第。

デザインテーマをHTML5で記述しているのに、今のままじゃアレだよなぁと。

figure要素 の具体的な使いドコロ

じゃあ、どんな時にfigureタグを使っていくか? という点。

基本は“ひとつの塊のコンテンツにキャプションが必要かどうか?”というところが判断基準になります。
写真や画像、図表の別を問わず、キャプションが必要ならfigureタグでマークアップするのが無難かなと思います。