参照される図版を表す

figure要素は、本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表します。

• デフォルトスタイル（上下マージン、左右マージン）

figure要素は、自己完結した単独のユニットとして参照されます。離れた場所に配置した場合でも、本文には影響が出ない内容で使用することができます。

• 図版にキャプション（タイトルや説明）を付けたい場合は、figure要素内の最初か最後のどちらかにfigcaption要素を配置します。（HTML 5.1の場合は任意の位置に配置できます）

次の例では、figure要素を切り離しても本文には影響が出ないことになります。（yamada.jpgは山田君の顔写真だと思ってください）

<p>デザインは山田太郎が担当しています。</p>

<figure>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
</figure>

<p>これまで多数のWebサイトをデザインしており、 ...</p>

実際に切り離すと次のようになります。（別のページへ切り離すことも可能です）

<section>

<h3>Webデザインについて</h3>

<p>デザインは<a href="#yamada">山田太郎</a>が担当しています。</p>
<p>これまで多数のWebサイトをデザインしており、 ...</p>
...

</section>

<section>

<h3>スタッフ紹介</h3>

<figure id="yamada">
<figcaption>山田太郎</figcaption>
<p><img src="yamada.jpg" alt="山田太郎の写真"></p>
<p>Webデザイン歴10年。ポップなデザインを得意としています。</p>
</figure>
...

</section>

次のように、写真と本文が密接に関係している場合は、figure要素を使うのは適切ではないと思われます。（この場合、写真を切り離してしまうと文章が成立しません）

<p>久しぶりの再会だったので、記念に写真を撮っておきました。</p>

<p><img src="yamada_kun.jpg" alt="お店の前に立つ山田君と私。"></p>

<p>右側に写っているのが山田君です。この後二人で ...</p>

要素内の見出しのランクについて

figure要素はセクショニング・ルートとなります。そのため、この要素内では独自の見出しのランク付けを行うことができます。

<section>

<h3>当社の成長戦略</h3>

<p>当社の売上高は増加を続けており、特にこの5年間は、前年を10%以上 ...</p>

<figure>

<h1>売上推移</h1>
<p><img src="sales.gif" alt="2006年：5000万円、2007年：5600万円 ..."></p>
<figcaption>2006年～2011年までの売上高</figcaption>

</figure>

<p>来年度は新製品を投入し、更なる成長を ...</p>

</section>

要素の内容に関して

figcaption要素を使用する場合、HTML5ではその配置位置に制限がありましたが（figure要素内の最初か最後のどちらか）、HTML 5.1ではfigure要素の子要素として任意の位置に置けるようになりました。