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

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

figureタグとfigcaptionタグ

figure要素とは?

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

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

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

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

注釈を付けるfigcaption要素

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

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

あるいは、

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

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

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

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

WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。 | ホホ冢次男WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。 | ホホ冢次男 

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

figureタグの具体的な使いドコロ

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

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

Commentsコメントしてもらえると励みになります