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

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

【目次】

figureは画像ではなく「注釈」
video要素はdisplay: inlineだった！
figure要素はdisplay: blockなので改行される
figure要素でvideo要素を囲うとセマンティック、スタイル両面でベター
最後に：どうせ囲うならセマンティック

※参考：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>