HTML Living Standardでのfigure要素やblockquote要素などの付帯情報のマークアップ

HTMLの標準仕様が2021年1月29日にW3CのHTML5からWHATWGのHTML Living Standardに変更された。

• HTML Living StandardとHTMLの歴史

その流れで、結構、大きな違いというか、個人的にやっていたfigureタグやblockquoteタグへのfooterタグのマークアップが通用しなくなったので、どうすれば良いかを纏めておきたい。

ブラウザがHTML5からHTML Living Standardへ完全に移行するわけではないから従来のままのマークアップでもサイトの表示や構成に直ちに不都合が生じるわけではない。

HTMLの標準仕様がWHATWGのHTML Living Standardになったからこれからは合わせてやって行くべきだけど、しかし以前の対応しないマークアップもなるべくならば合わせてやり直した方が良い。

HTML Living Standardではfooter要素がセクショニングルートの付帯情報に使えない

以前のHTML5のfooter要素はセクショニングコンテンツとセクショニングルートのフッターを示すことができるとされていた。

footer要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。

footer要素｜HTML5日本語訳｜W3C

現行のHTML Living Standardのfooter要素はセクショニングコンテンツとbody要素のフッターを示すことができるとされてセクショニングルートが除外されている。

footer要素は、その直近の祖先セクショニングコンテンツまたはbody要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。

footer要素｜HTML Standard 日本語訳｜WHATWG

調べるとHTML Living Standardにはそもそもセクショニングルートという考え方がないからfooter要素がそこで使われることもないんだ。

セクショニングコンテンツ（HTML5とHTML Living Standardに共通）

アウトラインを持って見出しとフッターの範囲を定義するもの。

• article
• aside
• nav
• section

セクショニングルート（HTML5のみ）

アウトラインを持って固有の区分けとフッターを持つもの。

• blockquote
• body
• fieldset
• figure
• td

HTML Living Standardのfooter要素はセクショニングコンテンツとbody要素に使用範囲が限定されているというか、HTML5よりも狭められている。

HTML5のセクショニングルートのbody要素を除いた四つの要素の中でfooter要素を使っていた場合に対応しなくなるから新しく書き換えたくなる。

因みにheader要素についても事情は同じで、やはりセクショニングルートの中では使えない。特別な意図がなければ外すか見出しのh1からh6タグと段落のpタグの組み合わせでhgroup要素が新しく使えるようになったから置き換えることができる。

HTML Living Standardでの付帯情報のマークアップはfigureタグとfigcaptionタグを組み合わせる

HTML5のセクショニングルートでは付帯情報にfooter要素が使えたから今まで引用のblockquote要素や図表のfigure要素の記事でそのようなマークアップを紹介して自分でもやっていた。すなわちblockquoteタグやfigureタグのコンテンツを親要素としてその中に付帯情報をfooterタグで子要素として記載すれば相互に関連付けることができた。しかしながら新しくHTML Living Standardに対応するべくfooter要素なしで同じようにしたい場合はどうするか。

基本的に個別に付帯情報を持つ引用や図表などのコンテンツはfigure要素に入れておくとその関連文を示すfigcaption要素で付帯情報を関連付けて記載することができる。

figure要素の付帯情報のマークアップ例

<figure>
コンテンツ
<figcaption>
付帯情報
</figcaption>
</figure>

figure要素は任意でキャプションを持つような自己完結型のコンテンツ、他のコンテンツと共に全体を作り上げる一部であってもそれ自体が定まった内容を持っているものを対象として例えばイラスト、図、写真、コードリストなどに注釈を付けるために使用できる（figure要素）とされる。

blockquote要素の付帯情報のマークアップ例

<figure>
<blockquote>
引用
</blockquote>
<figcaption>
出典
</figcaption>
</figure>

引用に出典を付ける場合は引用のblockquoteタグをfigureタグで囲って出典のfigcaptionタグを入れる。

つまり引用と出典はfigure要素のメインコンテンツと関連文として扱うことができる。

これだと引用にさらに補足を段落のpタグなどで付ける場合に出典を含めてそれぞれの関連性がfigureタグを親要素として他のコンテンツと区別して一つに纏められる。

HTML5でも可能なマークアップだったけれどもHTML Living Standardではblockquoteタグにfooterタグを使えないので、引用と出典しかない場合でもそれらの関連付けのために必ずfigure要素に入れることが求められる。

引用のblockquote要素にかぎらず、以前のセクショニングルートにfooter要素を使ったマークアップはbody要素を除いて全て同じで、figure要素とfigcaption要素による関連付けを用いて書き換えて構わない。