HTML5 のコンテンツグループ化関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

●参考
4.5 Grouping content - HTML5

コンテンツグループ化関連要素一覧

要素	カテゴリ	タグ内に含むもの	説明
figure	flow content sectioning root	次のいずれか。 figcaption 1 つと、その後に flow content flow content と、その後に 1 つの figcaption flow content	自己完結していて、通常は本文から参照されるもの。 たとえば、注釈のイラスト、図表、写真、コードリストなどに使われる。 本文から分離したところ (サイドバー、別ウィンドウ、付録など) に表示してもよい。
figcaption	なし	flow content	figure 要素を説明するもの。

figure、figcaption 要素の属性 (グローバル属性を除く)

figure と figcaption 要素の属性は、グローバル属性のみ。

例

W3C に書かれていた例をいくつか。
まずは、コードリストの例。

<p>基本的なコアインターフェース API の定義については、<a href="#l4">リスト 4</a> を参照のこと。</p>

<figure id="l4">

<figcaption>リスト 4: 基本的なコアインターフェース API の定義</figcaption>

<pre><code>interface PrimaryCore {

boolean verifyDataLine();

void sendData(in sequence<byte> data);

void initSelfDestruct();

}</code></pre>

</figure>

<p>API は、UTF-8 を使用するように設計されている。</p>

次は、figure ではない図と、figure である図・映像の例。

<h2>Malinko のコミック</h2>

<p>この事例では、コミックに関するある種の「知的財産」侵害に焦点が当て

られた (証拠物件 A 参照)。この訴訟では、以下の言葉で終わる予告編映像を

追及している。

<blockquote>

<img src="promblem-packed-action.png" alt="ラフコピー! この行為は問題満載!">

</blockquote>

<p>...が放送された。弁護士は Bigger 社製のノート PC という武器を手に、

雪ダルマ式戦法で先制攻撃を開始した。予告編は、証拠物件 B で全映像を閲

覧できる。

<figure>

<img src="ex-a.png" alt="汚れた紙に書かれた走り書き。">

<figcaption>証拠物件 A: 提示されたコミックの<cite>ラフコピー</cite></figcaption>

</figure>

<figure>

<video src="ex-b.mov"></video>

<figcaption>証拠物件 B: <cite>ラフコピー</cite>予告編映像</figcaption>

</figure>

<p>この事例は、法廷外で解決した。