<figure>タグの解説
<figure>は、写真や図表などの自己完結した要素を表します。この要素は、ドキュメントの本題（メインフロー）である・ないに関わらず、その段落でひとまとまりにできる要素を表現します。
例えば、ドキュメントの本題（メインフロー）が書かれたテキストの中で、参照される参考文献（写真、図表、コードの断片など）がある場合、メインフローに影響を与える事無く別の場所に移動できるようなものが相応しいと言えます。
この要素に明示的なキャプションを与える場合は、<figcaption>を一番最初の子要素、または一番最後の子要素として配置します。
<figure>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、指定されたコンテンツを埋め込みます。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも許可されています。
<figure>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<figure>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。一番多く見られるパターンは、子要素に画像を配置する内容です。
<figure>
<img src="/images/sample.jpg" alt="参照する図表">
</figure>
参照する図表にキャプション・概要・説明などを加える場合は、子要素に<figcaption>を追加します。配置できる箇所は一番最初か一番最後です。
<figure>
<figcaption>この図表のキャプション</figcaption>
<img src="/images/sample.jpg" alt="参照する図表">
</figure>
<figure>
<img src="/images/sample.jpg" alt="参照する図表">
<figcaption>この図表のキャプション</figcaption>
</figure>
画像や図表のほかにも、ソースコードなどの断片も配置できます。
<figure>
<figcaption>Sample Code</figcaption>
<pre tabindex="0"><code translate="no">
// Some Script
</code></pre>
</figure>