figure - ドキュメントのメインのフローから単独のユニットとして参照されるコンテンツをマークアップ。

オプションで、キャプション指定し、自己完結したものとなります。
用途の例としては、挿絵、図表、写真、コードなどに注釈を付けるためなどが想定されます。
これらは、ドキュメントのメインのコンテンツから参照されることになります。
ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや
付属ページなどへ切り離すことが可能です。

figure要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
figure - - -

figure要素のHTML4からHTML5への変更点

figure要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「コードをマークアップしたfigure要素」のサンプル

HTMLコード

<figure id="l4">
 <figcaption>キャプション</figcaption>
 <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence&lt;byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「コードをマークアップしたfigure要素」のサンプルプレビューを確認

「写真をマークアップしたfigure要素」のサンプル

HTMLコード

<figure>
  <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替えテキスト">
  <figcaption>キャプション</figcaption>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「写真をマークアップしたfigure要素」のサンプルプレビューを確認

「figureではない画像と、figureによる画像とビデオ」のサンプル

HTMLコード

<h2>figureではない画像と、figureによる画像とビデオ</h2>
<p>figure要素を使っていない例:</p>
<blockquote>
 <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替テキスト">
</blockquote>

<p>figure要素によりマークアップされた画像例</p>
<figure>
 <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替テキスト">
 <figcaption>キャプション</figcaption>
</figure>

<p>figure要素によりマークアップされたvideo要素</p>
<figure>
 <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls></video>
 <figcaption>videoキャプション</figcaption>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「figureではない画像と、figureによる画像とビデオ」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/grouping-content.html#the-figure-element)