<figure>説明付きの図表を示す

<figure>タグは、説明文の付いた図表(写真・図・表・動画・コード)などを示す際に使用します。 通常はHTML文書のメインコンテンツから参照されるようなものに使用しますが、同一ページ内であっても、本文の流れに影響を与える事なく、ページの隅や独立した別の文書に記述する事ができます。

ただし<figure>はセクショニングルートとなるため、メインコンテンツの一部となるような図表についてはfigure要素を使用しないようにします。 これはfigure要素を使用した内容がメインコンテンツのアウトラインから切り離された状態となるためです。 ですのでfigure要素は、ページ内の別の場所や他のページに移動させても問題のないようなものに対して使用します。

説明文(キャプション)を入れたい場合は<figure>~</figure>の最初、または最後に<figcaption>を一つだけ配置し、そこに記述して下さい。 (HTML5.01の場合は任意の場所に配置できます)

なお<figcaption>を入れない場合は説明文なしの状態で表示されます。

HTML5での変更点

figure要素はHTML5から追加された要素ですが、この要素はコンテンツの意味づけという点では重要な意味を持ちます。

どのような図表に対して使用すればいいのかが、悩ましい点ではありますが、w3cの仕様には「HTML文書のメインコンテンツから注釈として添付されるイラスト・図表・写真などに対して利用すると記載されています。 そして「figure要素はメインコンテンツの流れに影響を与える事はない」とも書いてある事から、本文の流れとは直接関係ないが、添付すべき図表などに対して使用することが望ましいとも言えます。

なおfigure要素はセクショニングルートとなるため、hタグなどで見出しのランク付けを行う事が可能です。

書式

  • <figure 属性="値">~</figure> ……… 説明付きの図表を示す

使用した時の例

<p>商品の農産物は中尾さんが生産しています。</p>
<figure>
<img src="nakao.jpg" alt="中尾さんの写真">
<figcaption>生産者:中尾幸助</figcaption>
</figure>
<p>中尾さんの生産するリンゴは世界でも有数の....</p>

上記のfigure要素部分を切り離しても本文には影響はでません。 切り離すと下記のように記述できます。

<h4>商品について</h4>
<p>商品の農産物は<a href="#nakao">中尾さん</a>が生産しています。</p>
<p>中尾さんの生産するリンゴは世界でも有数の....</p>

<h4>生産者の紹介</h4>
<figure id="nakao">
<img src="nakao.jpg" alt="中尾さんの写真">
<figcaption>生産者:中尾幸助</figcaption>
</figure>

上記の場合であれば別のページへ切り離す事も可能です。 下記はfigure要素を使うべきではない例となります。

<p>花火に行ってきて写真を撮りました。</p>
<img src="hanabi.jpg" alt="花火の写真">
<p>上の写真に写っている花火がすごいキレイでした</p>

上記の場合は、写真がないと文章が通じない事になります。 このようにメインコンテンツの一部であるような図表についてはfigure要素を使用すべきではありません。

ブラウザ上の表示例

商品について

商品の農産物は中尾さんが生産しています。

中尾さんの生産するリンゴは世界でも有数の….

生産者の紹介

中尾さんの写真
生産者:中尾幸助

※上記はfigure要素を切り離した例の表示例となります(サンプル2番目)

対応ブラウザなどのデータ

形式 <figure>~</figure> カテゴリ フローコンテンツ, セクショニングルート, パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~