ひよこ3:07のTechブログ

HTML5のfigure要素の使い方

2014-04-12html

figure要素

HTML5 では新たに figure 要素が追加された。画像・映像・プログラムのソースコード・詩歌・アスキーアートなどの、自己完結しているコンテンツに、注釈を付けるために使われる。

figure 要素は、メインコンテンツと関係ある、独立したサブコンテンツにのみ使うことができる。例えば、挿絵や図表とかには使えるけど、画像がそのページのメインである場合にはfigure要素を使ってはいけない。そのコンテンツの有無で、アウトラインに影響があるかで判断できるかも。

figcaption要素

figcaption要素は注釈や図表の見出しなどを表す。figure要素の最初か最後のどちらかに、ひとつだけfigcaption要素を挿入することができる。

<!-- figcaption のない例 -->
<figure>
    <video src="path/to/video.webm" />
</figure>
<!-- 最初に figcaption を挿入した例 -->
<figure>
    <figcaption>〇〇の写真</figcaption>
    <img src="path/to/image.jpg" />
</figure>

figure要素のなかではh1要素やp要素を使うことができる。figureはセクショニングコンテンツの要素なので、ページ全体のアウトラインは変わらない。

<!-- 見出しに h1 を使い、さらに最後に figcaption を挿入した例 -->
<figure>
    <h1>〇〇の写真</h1>
    <img src="path/to/image.jpg" />
    <figcaption>××</figcaption>
</figure>

前方互換

スタイルシートをちゃんと指定すれば、一部を除いて古いブラウザでも特に問題なく表示される。IE8以下とFirefox2にはバグがあって、それぞれ対応が必要。

IE8以下では未知の要素にスタイルシートが適用されない。簡単なJavaScriptを書くだけで対策できる。

// IE8でfigure要素にスタイルシートが適用されるようにするJavaScript
document.createElement('figure');
document.createElement('figcaption');

Firefox2では、未知の要素の中にh1やpなどのブロック要素があるとき、DOMが正しく生成されない。XHTMLとしてHTML5を公開する必要がある。ただし、Firefox2のシェアはほぼ0だから、無視するべきかも。

参考