figure要素

いまさらHTML,CSS講座 > HTML5 > figure要素 - グルーピング・コンテンツ -

figure要素は、イラストや図、写真、コードリストなど自己完結型のフロー・コンテンツを表します。また、必要に応じてキャプションを持つことができます。これらは通常、ドキュメントの主な流れからは独立したユニットとして参照されるので、文章や用語についての補足説明や、解説などいわゆる注釈として使用します。

キャプションは、figcaption要素で指定します。なお、figcaption要素は必須ではありません。

以下の例では、figure要素をサムネイルのページ（例b）から参照する元のサイズの写真ファイルが掲載されているページのマークアップに使用しています。

例a）

<body>
<figure>
<h1>Sample Images</h1>
<img src="img_example.jpg" alt="900px×600px" width="900" height="600">
<p>Previous　<a href="example_figure_b.html">HOME</a>　Next</p>
<figcaption>2013.12.08</figcaption>
</figure>
</body>

上記のHTMLドキュメント

例b）900×600（px）の写真が掲載されているページへのリンクがあるページ。

<body>
<h1>Sample Images</h1>
<a href="xxxxx.html"><img src="img_example.jpg" alt="" width="200" height="133"></a>
<a href="xxxxx.html"><img src="sample_images.jpg" alt="" width="200" height="133"></a>
...more...
</body>

上記のHTMLドキュメント（左のサムネイルに例aのHTMLファイルへのリンクが指定してあります。）

カテゴリ: フロー・コンテンツ、セクショニング・ルート、パルパブル・コンテンツ。
要素を使用することができる場所: フロー・コンテンツが使用できる場所。
コンテンツモデル（内容に含めることのできる要素）: フロー・コンテンツ、figcaption要素（figure要素の内容の先頭か、末尾どちらか1つ）。
コンテンツ属性: グローバル属性。