<figure>の解説|クロノドライブのHTML5辞典

<figure>

対応ブラウザ Internet Exolorer 9~ / Chrome 8~ / Firefox 4~ / Opera 11.10~ / Safari 5.1~ / Android 4.0~ / iOS 6.0~
タグの分類 フロー・コンテンツ
セクショニング・ルート
パルパブル・コンテンツ
含められるもの フロー・コンテンツ
<figcaption>要素(フロー・コンテンツの前後どちらかに1つ)
使える場所 フロー・コンテンツを使える場所
用例 <figure>
<figcaption>これは1枚目の写真です。</figcaption>
<img src=""sample.jpg"" width=""400"" height=""360"">
</figure>

<figure>とは

「figure」とは、それ自身で完結する様々な内容を表すタグです。主に図表やイラスト、ソースコードや詩など、<figcaption>によってキャプションを付けて文書本文から参照するようなものに使用します。「それ自身で完結する」というのは必ずしも他から独立した内容とは限らず、段落の中の一文全体なども含まれます。

<figure>~</figure>の先頭か末尾に<figcaption>要素を配置することで、キャプションを付けることができます。キャプションは各<figure>に1つだけしか付けることができません。

図表などに対しキャプションを付け、本文中で参照する際に「左の図」や「上の画像」などではなくキャプションを使うことで、その図表などをページの端や脇へ動かしても意味が通じるようになります。

<aside>との意味的な違いは、<aside>が取り除いても本文の意味が変わらないような独立した内容を表すのに対して、<figure>は本文の中の一部ではあるものの、どの位置に配置したとしても意味は変わらないような内容を表すことです。