HTML5 ロゴ

figure 要素は、HTML5 から新たに追加されたタグで、図表であることを示す際に使用します。
ここでいう図表とは、本文から参照されるようなイラスト、図、写真、ソースコードなどのこと。

本文に影響を与えることはなく、別ページなどに切り離して使うこともできます。

具体的には、サムネイル画像や、挿絵、サンプルコードやチュートリアルの画像などを figure タグで囲うことになります。

また、キャプションを追加したい場合は figure 要素内に figcaption 要素を配置します。

figure 要素の使用例

<h3>当社の成長戦略</h3>
<p>当社の売上高は増加を続けており、特にこの5年間は、前年度比10%以上の成長を続けています。</p>

<figure>
<p><img src="sales.jpg" alt="売上推移" /></p>
<figcaption>2008年～2013年までの売上高</figcaption>
</figure>

<p>更なる成長のために、来年度は新製品を投入します。</p>