HTML5の画像などのメインのコンテンツの一部へのfigureタグの使い方

ブログのテンプレートをBloggerの新しいテーマに変えたらHTML編集でfigureタグが上手く使えるようになった。以前は周りに余白が付いてしまうのをCSSで消し切れなかった。しかしBloggerの新しいテーマのテンプレートでは大丈夫だと分かった。figureタグはHTML5から追加されたメインのコンテンツで画像などを示すためのマークアップだけれどもブログの記事で改めて使い出している。ブラウザには特に影響しない。figureタグが使われているかどうかはサイトを閲覧しても分からない。僕がサイト作成に取り入れたいのは検索エンジンのためだ。クローラー／解析ロボットにサイト内容をしっかり伝えられるのではないか。figureタグで囲まれたコンテンツは一部でもメインに構成されると的確に示されるので、サイト評価を上げると検索エンジンからのアクセスアップに少しでも期待できるのが嬉しい。figureタグは一つだけで使うとはかぎらないところが、結構、面白い。他のタグと組み合わせるとさらに検索エンジンにサイト内容を分かり易く仕上げられる。figureタグの使い方の基本咲き出した赤い躑躅

figureタグと関連するタグを使ってメインのコンテンツの図表としてマークアップされたサンプル画像。

Sony α5100 - Zeiss Touit 2.8/50M, 1600×1067, 302KB, 1/1667s, f/2.8, ISO 100figureタグはサイトのメインのコンテンツの画像などを示すためのマークアップだからサブのコンテンツには必要ないし、たとえ同じものを載せるとしても付けなくて構わない。

figure要素は、任意でキャプションをもつ（完全な文のような）自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツを表す。

figure要素｜HTML5 日本語訳

figureタグの対象とは何か。W3C（HTMLの勧告を行う）の仕様によると「自己完結型」だからメインの纏まった部分のコンテンツに限られている。本文に組み込まれているならば「単独のユニット」だからかりに抜き取っても十分に成り立つような対象にのみfigureタグを使うとHTML構文としては正確なんだ。figureタグのマークアップ例<figure><img src="画像url"><figcaption>説明文</figcaption></figure>画像に付ける場合には画像のimgタグをfigureタグで囲む。または文章や動画や音声やソースコードでも構わないし、どんな対象でもメインのコンテンツの一部ならばfigureタグには基本的に相応しい。説明文があると内側にfigcaptionタグで入れられる。figureタグの対象に説明文だと結び付けて示すために使う。画像が引用で出典も付ける場合<blockquote><figure><img src="画像url"><footer><cite>作品</cite> © 著作者</footer><figcaption>説明文</figcaption></figure></blockquote>サイトで引用として画像を載せるならば引用のblockquoteタグでfigureタグを囲んでおくと分かり易い。さらに出典も必要ならばfooterタグを入れても良いし、作品名にはciteタグも使える。HTML5ではblockquoteタグにfooterタグを入れると引用と出典を結び付けて示すけれどもfigureタグも同じようにそれ自体で付帯情報にfooterタグを使えるから図表と直接的に結び付けて示すためには引用の出典でも外側に出さず、figureタグの内側にfooterタグを記載しておくと良いと思う。画像と付帯情報だけを載せる場合<figure><img src="画像url"><footer>付帯情報</footer></figure>例えば写真のサイズやExif情報（カメラの機種名やシャースピードなどの撮影データ）を載せたりするならば説明文ではないからfigcaptionタグよりもfooterタグが適している。追記：2021年にHTMLの標準がHTML5からHTML Living Standardに変更されてからfooterタグがfigureタグの付帯情報に使えなくなり、代わりにfigcaptionタグを使って記載しなくてはならなくなった。

コメント