HTML5で書くようになると、セマンティック（意味的）な文書構造にしたいと思って新しい要素をどんどん使いたくなってきます。ボクもちょっと前まではもう「<div>のことキライなの？」ってくらい今までのXHTMLを書き換えたりしてました。間違って使うことも多かった反省も踏まえつつ、<figure>要素の使い方です。
注）ここに書いてある用例が必ず正しいわけではありません。開発者による入門書にもありますが、要素の種類が100万個もあるわけではないので「ただ一つの正しいマークアップの方法なんてない」ということを付け加えておきます。
1. figure要素はセクショニング・ルート
HTML5では今までの「インライン要素」「ブロック要素」などの分類と違って各タグが属する「カテゴリ」というものがあります。複数のカテゴリに含まれているタグもあればどこにも属していないタグもあります。<figure>要素は<blockquote>要素や<body>要素と同じ“セクショニング・ルート”というカテゴリに属しています。
セクショニング・ルートはセクショニング・コンテンツ（※）と違って、それぞれ固有のアウトラインを持っています。例えば、セクショニング・コンテンツに属する<section>要素は、入れ子にすることで親のサブセクションとなり見出しや内容も親の内容の一部として解釈されます。
※）拙著ながら仕様の訳を元に「HTML5 › 見出しとセクション」というページ作りました。
<body>
<h1>オレの小説 第一章</h1>
<p>第一章の内容</p>
<section>
<h1>第一章の第一節</h1>
<p>第一章の第一節の内容</p>
<section>
<h1>第一章の第一節の第一項</h1>
<p>第一章の第一節の第一項の内容</p>
</section>
</section>
<section>
<h1>第一章の第二節</h1>
<p>第一章の第二節の付録</p>
</section>
</body>
一方で、セクショニング・ルートは中身のセクションや見出しは親や祖先に影響を与えません。例にあるように引用部分<blockquote>に含まれる見出しやセクションがその文書の一部となることはないからです。
<body>
<h1>オレの小説 第一章</h1>
<p>第一章の内容</p>
<section>
<h1>第一章の第一節</h1>
<p>第一章の第一節の内容</p>
<section>
<h1>第一章の第一節の第一項</h1>
<p>第一章の第一節の第一項の内容</p>
</section>
</section>
<!-- この引用の中にある見出しやタイトルは「オレの小節」のものではない -->
<blockquote>
<h1>他人の小説 第二章</h1>
<p>他人の小説 第二章の内容</p>
</blockquote>
</body>
…ということで、セクショニング・ルートである<figure>要素は「文書の主な流れからひとつのユニットとして参照される図版（画像、図、グラフ、ソースコードなど）」に使用できます。参照される図版とは、文書の流れに影響を与えず別の場所へ移動しても同じ意味で扱えるコンテンツを指します。
2. figure要素の使いどころ
セクショニング・ルートである<figure>要素が適している内容は「どのページ、どの位置に置いてもキャプションを変えずに使用できるもの。また文書の意味が変わってしまわないもの。」と言えると思います。公式を見ると結構たくさん用例が載せられています。
4.4.11 The figure element ‹ 4.4 Grouping content — HTML5
キャプション（<figcaption>）を使うこともできますが、使用する際はどこに貼り付けても意味がわかるよう具体的なものがいいと思います。
また、<figure>の内容を参照する側としては、「次の図に示すように…」とか「上の写真…」といった相対的な参照は避け、ID属性などでラベルの使用を使った方が適切だということです。「どこに置いてもいいんだろ、次ってなんだよ」ってことでしょうね。
以下、仕様と入門書も参考にして。。
正しかろう使い方
コードとか出力サンプル
<figure>というと画像とか動画のイメージがありますが、上にあるセクショニング・ルートの要件を考えるとコンピュータコードや出力結果のサンプルなんかは最も向いてる感じがします。公式のページでも最初に用例として書かれています。
ギャラリーページの写真（動画）とそのキャプション
公式ページでは、ギャラリーページの写真（動画）とキャプションをマークアップする例が載っています。ギャラリーページではないブログ記事などでも「写真家〇〇氏の〇〇」みたいな作品名のキャプションとともに掲載する場合は<figure>要素にするのが良いと思います。
調査結果や指標のグラフなど
グラフなどの画像を示してそれについて言及する記事とかでも、グラフ自体は「ページのどこに配置しても文書の意味に影響を与えない独立した内容」といえるのでキャプションとともにマークアップするのは適切だと思われます。
突然のポエム（詩）
公式にも例があって「んなヤツいんの？」って思いましたが、理には適っています。このようにテキストだけのコンテンツにも使えるんですね。他に適切なタグがなく且つセクショニング・ルートが適切なものの例かもしれません。
複数の<figure>をグループ化
親も子も適切なマークアップ、というのが前提だと思いますが<figure>は入れ子にも出来ます。公式ページでは、複数の<figure>（年代別の城の絵・写真）を、古くからの城の絵と一括りにして<figure>でラップしている例が出ています。
違かろう使い方
料理レシピの調理の画像
食材を切ったのとかフライパンでジュウジュウやってる写真とかは、文書の内容に沿ったものなので<figure>でマークアップするのは不適切でしょう。それぞれの写真にキャプションは付けられると思いますが、写真の順番を並び替えたら意味変わっちゃいますから。
その他（主に写真）
「機能の説明」「分解中の写真」「その時の顔」とか…。まぁ上の料理レシピと同じで、そこに置いとかないと文書の意味が変わってしまうようなものは<figure>に適さないということですね。ボクも<figure>使ったもののやっぱおかしいな、と思って元に戻したとこいっぱいあります。
以上、<figure>要素についてでした。これからも新しい要素にバンバン手を出すのは控えめにしてよく勉強してから手を付けていきたいと思います。間違っているところなどありましたらご指摘お願いいたします。その場合恥ずかしいので早め早めにお願いします。
