クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

video要素はfigure要素で囲った方がセマンティック的にもスタイル的にもいいよ、というお話

HTML5で新たに追加されたfigure要素とvideo要素。なんとなく画像はfigure要素、動画はvideo要素というイメージを持っていたが、figure要素はもっと広い用途に当てはまり、video要素も内包する要素でした。そして、HTMLのセマンティック(文書構造)的にもCSSのスタイル(装飾)的にもvideo要素はfigure要素で囲った方が良いことがわかりました。

【目次】

※参考:HTML、CSSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと

figureは画像ではなく「注釈」

figureについてこんな記事を見つけました。

※参考:<figure> について(やや堅苦しく)考える - Qiita

figure要素は注釈である

  • annotate illustrations: 注釈の絵
  • diagrams: 図
  • photos: 写真
  • code listings: コードの列挙

なくてもいいけど、あったらより詳しく内容がわかる補足情報・説明文・解説

へー「コードの列挙」(pre要素)もfigureなんだ?さらにこの記事では表組み(table要素)もfigureで囲うとしている。

ちなみに自分の場合は画像全部をfigureを囲っているわけではなく、アイコンや背景などは囲わない。

あと、ビットマップ画像の表はfigureで囲うがtable要素は囲っていなかった(不統一という認識がなかった)。

video要素はdisplay: inlineだった!

もうひとつ気になったのがvideo要素。動画もある意味では画像とおなじく「注釈」といえるのではないか。そんなことを考えているとこんな記事が。

※参考:<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN

video要素は置換要素です。 — display の値は既定で inline ですが、ビューポートの既定の幅と高さは埋め込まれる映像で定義されます。

ほえ?displayがinlineとな?なぜに?ほんとかなぁ

ためしにp要素の中にインラインでvideo要素を入れてみる。

<article>
<section>
<h2>videoテスト</h2>
<p>ああああああああああああああああ
    <video>videoテスト</video>
  ああああああああああああああああ</p>
</section>
</article>

あ!ほんとだ!インラインになった!ど、どーゆーこと?

太字とか斜体、アイコンみたく文章の中に文字と同サイズで入れ込むような使い方はあまりないだろうに。なぜにインライン?謎仕様。*1

figure要素はdisplay: blockなので改行される

ちなみに、figure要素のdisplayはデフォルトでブロックです。文章とは独立しても成立する「注釈」なのでp要素(段落)と同じく改行する。

<section>
<h2>figureテスト</h2>
<p>ああああああああああああああああ
    <figure>figureテスト</figure>
    ああああああああああああああああ</p>
</section>

figure要素でvideo要素を囲うとセマンティック、スタイル両面でベター

と、いうことで、video要素もfigure要素で囲うとちゃんと改行してくれます。

<section>
<h2>video in figureテスト</h2>
<p>ああああああああああああああああ
    <figure>
    <video>videoテスト</video>    
  </figure>
    ああああああああああああああああ</p>
</section>

セマンテック(文書構造)的にもスタイル(装飾)的にもvideo要素はfigure要素で囲うのがベターだと感じました。

他にも、pre要素、table要素も本文から独立した注釈的な位置付けであればfigureで囲うのが望ましいと思います。はい。*2

最後に:どうせ囲うならセマンティック

Googleの検索技術が向上すると、厳密じゃないHTMLのタグでもコンテンツの内容を正しく読み取ってくれる可能性があります。ただ、Googleの機械は読みとってくれても、人間(共同作業のメンバーや半年後の自分)にとっては話が別です。

スタイル的にブロックにしたいだけならdiv要素でもなんでもいいんです。でも、第三者がHTMLのコードを見て一目で意味がわかるのが望ましい。

「それ」としか解釈しようがないものは、ふさわしい「それ」で囲う。そしてdiv要素やspan要素などの汎用的なタグは、他にふさわしいものない時の「最終手段」として登場されたいものです。

*1:もしかしてアニメーションアイコン用?レアケースだよなw

*2:ちなみにfigcaption要素(キャプション)の有無はfigure要素で囲う理由にはあまり作用しないと思います。あれば使う、なければ使わないだけの話