figure
<figure> は参照される図版を示します。この要素は本文に対する補足的内容で使用します。この要素が無くても本文は意味が通じるように、そしてこの要素単体でも何の情報か分かるようにする必要があります。この要素にキャプションを付けるには <figcaption> 要素を使用します。
- 分類
- フローコンテンツ、区分化ルート、知覚可能コンテンツ
- 内包できるもの
- フローコンテンツ、<figcaption> 要素とそれに続くフローコンテンツ、フローコンテンツとそれに続く<figcaption> 要素 いずれか
属性
グローバル属性のみ
サンプル
本文のみで内容が伝わるようにして挿絵として画像を使用します。本文と関係のある内容でありながら独立して使用しても意味が通じることが大切です。
<section>
<h3>妖怪たぬき娘</h3>
<p>妖怪たぬき娘は狸のような耳や尻尾が生えた存在です。人でもそれ以外の動物でもないため一部では妖怪として認識されています。</p>
<figure>
<p><img src="abc.jpg" alt="妖怪たぬき娘のイラスト" /></p>
<figcaption>妖怪たぬき娘</figcaption>
</figure>
</section><figure> 要素をセクションの外へ切り離して使用することも可能です。<figure> 要素は区分化ルートのため見出しを設定して1セクションとして扱うことも可能です。
<section>
<h3>妖怪たぬき娘</h3>
<p>妖怪たぬき娘は狸のような耳や尻尾が生えた存在です。人でもそれ以外の動物でもないため一部では妖怪として認識されています。</p>
</section>
<figure>
<h3>妖怪たぬき娘</h3>
<p><img src="abc.jpg" alt="妖怪たぬき娘のイラスト" /></p>
<figcaption>狸のような耳と尻尾が特徴</figcaption>
</figure>もし図による解説が本文中で必要不可欠ならば、その図のマークアップは <figure> ではなく <p> を使用します。
<section>
<h3>妖怪たぬき娘</h3>
<p>妖怪たぬき娘は人でもそれ以外の動物でもないため一部では妖怪として認識されています。</p>
<p><img src="abc.jpg" alt="妖怪たぬき娘のイラスト" /></p>
<p>上のイラストを見ると、少女に狸のような耳と大きな尻尾が生えているのがわかります。</p>
</section>注意点
<aside> との使い分けは難しいところですが、おおよそ次のような認識で問題ないかと思います。
- <figure> 要素は、記事本文から参照される補足的な内容で、無くてもよいがあればもっと本文の内容への理解が深まるようなもの
- <aside> 要素は、記事本文と関係している内容で本文からは参照されていないもの（<aside> 要素が <article> 要素外にある場合）。例えば以下のような内容
- 同一カテゴリ内の別の記事へのリンク
- コンテンツに連動した広告