### figure要素

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

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

### figcaption要素

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

```html

<figure>
    <video src="path/to/video.webm" />
</figure>
```

```html

<figure>
    <figcaption>〇〇の写真</figcaption>
    <img src="path/to/image.jpg" />
</figure>
```

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

```html

<figure>
    <h1>〇〇の写真</h1>
    <img src="path/to/image.jpg" />
    <figcaption>××</figcaption>
</figure>
```

### 前方互換

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

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

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

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

### 参考

- [4.5.11 The figure element — HTML5](http://www.w3.org/TR/html5/the-figure-element.html#the-figure-element)
- [figure 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP](http://www.html5.jp/tag/elements/figure.html)
- [HTML5 を IE や Firefox 2 でも使えるようにする方法 - html5doctor - HTML5.JP](http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html)
- [\[HTML5\]正しいfigure要素の使い方(文脈まで深く考えた) - WEBCRE8.jp](http://webcre8.jp/compare/html5-right-figure.html)
- [『figure要素』 / HTML5新要素一覧　 | HTML5でサイトをつくろう](http://www.html5-memo.com/new-element/figure/)
- [HTML 5での\<figure\>要素の使い方と疑問点(平成22年 4月19日) - 『しらぎくのWWW作成入門』メモ](http://www.memo.marguerite.to/WWW/%E5%B9%B3%E6%88%9022%E5%B9%B4/4%E6%9C%8819%E6%97%A5-HTML_5%E3%81%A7%E3%81%AE%3Cfigure%3E%E8%A6%81%E7%B4%A0%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E7%96%91%E5%95%8F%E7%82%B9.html)

ひよこ3:07のTechブログ

tag : html