写真などのまとまりを表す

figure

< figure 【 フィギュア 】 >〜</figure >

figure要素は、写真、挿絵、図表、コードなどのまとまりを表します。figure要素によるまとまりは、単体で独立したものでなければなりません。つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、切り出した内容自体で意味が通るようにする必要があります。また、figcaption要素によってキャプションを付与できます。

カテゴリー ・セクショニングルート
・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル ・フローコンテンツ
・最初または最後の子要素としてfigcaption要素を記述可能
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例写真と説明文のまとまりを表す

<figure><img>
<figcaption>~</figcaption></figure>

figure要素で商品解説の写真を表し、figcaption要素で写真の内容についてキャプションを記述しています。商品解説の本文では、figure要素に直接言及することはなく、figure要素の内容がなくても文書の内容に影響はありません。一方、figure要素単体を見ても何の情報であるのかがわかるように、キャプションで必要最低限の内容を説明しています。

<h1>大樽町カフェ自慢のパンケーキの紹介</h1>
<p>
大樽町カフェの1番人気メニュー「はるかぜのパンケーキ」は、店長自らが厳選した素材で
子どもから大人まで楽しめる味わいを追求した自慢の一品です。
<p>
<figure>
  <img src="pancake.jpg" alt="当店のパンケーキの写真。イチゴとベリーが添えられている。">
  <figcaption>大樽町カフェ「はるかぜのパンケーキ」の写真。重ねられたケーキにイチゴとベリーがのっています。</figcaption>
</figure>

関連記事