figure 要素

4.5.11 figure 要素

カテゴリー
フロー・コンテンツ
セクショニング・ルート
この要素を使うことができるコンテキスト:
フロー・コンテンツが期待される場所
コンテンツ・モデル:
ひとつの figcaption 要素の後にフロー・コンテンツが続く、または、
フロー・コンテンツの後に 1 つの figcaption 要素が続く、または、
フロー・コンテンツ、のいずれか。
コンテンツ属性:
グローバル属性
DOMインタフェース:
HTMLElementを使う。

figure 要素は、いくらかのフロー・コンテンツ表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。

そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。

この要素の子に figcaption 要素があれば、その最初のものが、その figure 要素のコンテンツのキャプションを表します。子に figcaption 要素がなければ、キャプションを持たないことになります。

この例は、コードをマークアップした figure 要素を示しています。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

ここには、写真をマークアップした figure 要素があります。

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>

この例には、figure ではない画像と、figure となる画像とビデオがあります。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

これは、詩の一部が figure を使ってマークアップされたものです。

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

この例は、ある城について論じたもっと広範囲な作品の一部ですが、この figure の中には 3 つの画像があります。

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-figure-element