スキップしてメイン コンテンツに移動

些細な日常

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

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

その流れで、結構、大きな違いというか、個人的にやっていた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要素による関連付けを用いて書き換えて構わない。

  • ブログの投稿者: 結城永人
  • タイトル: HTML Living Standardでのfigure要素やblockquote要素などの付帯情報のマークアップ
  • 最終更新: 

コメント

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...