figure 要素

4.4.11 figure 要素

カテゴリー:
フロー・コンテント
セクショニング・ルート
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
1 個の figcaption 要素の後にフロー・コンテントが続く、または、
フロー・コンテントの後に 1 個の figcaption 要素が続く、または、
フロー・コンテント、のいずれか。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う。

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

この文脈における自己完結とは、必ずしも独立を意味しているわけではありません。たとえば、段落のそれぞれの文が自己完結しているという意味です。文の一部となる画像は figure に不適切でしょうが、文全体が画像でできているなら、しっくりくるでしょう。

ゆえに、この要素は、イラスト、図表、写真、コードなどを注記するのに使うことができます。

figure がキャプションよって識別できるようにすることで(図表番号などで)ドキュメントのメインコンテンツから参照できるのであれば、そのようなコンテンツは、ドキュメントの流れに影響を与えずに、主要コンテンツから、ページの脇や専用ページや付録ページなどへ、簡単に切り離すことができます。

たとえば "上記の写真に" や "次の図が示すように" など、figure 要素が相対的位置によって参照される場合、その図を移動するとページの意味を損なってしまいます。ウェブ制作者は、相対的な参照を使うのではなく、図を参照するラベルの利用を考慮することが推奨されます。そうすることで、ページの意味に影響を与えずに、簡単にページを再スタイリングできるようになります。

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

figure 要素のコンテンツは、前後のフローの一部です。ページの目的がその図画、たとえば、画像シェアサイトでの写真などを表示することなら、figurefigcaption 要素を使って、その図画のキャプションを明示的に提供することができます。関連がほとんどないコンテンツや、前後のフローとは違う別の目的を提供するコンテンツに対しては、aside 要素が使われるべきです(それ自身、figure を囲むことができます)。たとえば、article のコンテンツを再掲するプル引用は、figure の中よりかは aside の中のほうが適切でしょう。なぜなら、それは、そのコンテンツの一部ではなく、読者を惹き付ける目的でコンテンツを再掲する、または、キートピックをハイライトするものだからです。

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

<p><a href="#l4">listing 4</a> はプライマリ・コア・インタフェース
API 宣言です。</p>
<figure id="l4">
 <figcaption>Listing 4. プライマリ・コア・インタフェース API 宣言。</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>この API は UTF-8 の利用を前提に設計されています。</p>

ここには、ページのメインコンテンツとなる写真をマークアップした figure 要素があります(ギャラリーなど)。

<!DOCTYPE HTML>
<title>職場でのバブルズ — 私のギャラリー™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="バブルズは、オフィスの椅子に座って、一心に最新の
           プロジェクトに取り組んでいる。">
 <figcaption>職場でのバブルズ</figcaption>
</figure>
<nav><a href="19414.html">前へ</a> — <a href="19416.html">次へ</a></nav>

この例には、図画でない画像があります。加えて、図画となる画像とビデオがあります。最初の画像は、文字通り、この例の 2 つ目の文の一部です。それは自己完結する単位ではありませんので、figure は不適切です。

<h2>マリンコのコミック</h2>

<p>この訴訟では、コミックに関するある種の "知的所有権" の侵害が
争点になりました (別紙 A を参照のこと)。この訴訟は、次の言葉で終わる
トレーラーの後に開始されました:

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

<p>...が放映されました。弁護士は、大きなノートブックを用意してきましたが、
見込みもない先制攻撃を放ちました。この予告編の完全なコピーは
証拠 B に入っています。

<figure>
 <img src="ex-a.png" alt="汚れた紙切れに書かれた 2 つの走り書き。">
 <figcaption>証拠 A。疑惑の <cite>rough copy</cite> コミック。</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>証拠 B。<cite>Rough Copy</cite> の予告編。</figcaption>
</figure>

<p>この訴訟は示談で解決しました。

これは、詩の一部が 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 要素をネストして使うことで、グループのキャプションと、グループの中の個々の図画のキャプションの両方を提供しています:

<figure>
 <figcaption>城の歴史: それぞれ 1423年, 1858年, 1999年</figcaption>
 <figure>
  <figcaption>エッチング。作者不明, 1423年ごろ。</figcaption>
  <img src="castle1423.jpeg" alt="城には 1 つの塔があり、その周りに高い壁があります。">
 </figure>
 <figure>
  <figcaption>キャンバスの油絵。マリア・トール, 1858年。</figcaption>
  <img src="castle1858.jpeg" alt="城の塔が 2 つになり、壁も 2 つあります。">
 </figure>
 <figure>
  <figcaption>フィルム写真。ピーター・ ジャンクル, 1999年。</figcaption>
  <img src="castle1999.jpeg" alt="城は瓦礫と化しているが、もともとあった塔はすべて無事に残っている。">
 </figure>
</figure>

ときに図画は、コンテンツから暗黙的にしか参照されない場合もあります:

<article>
 <h1>財政審議は期限が近づくにつれ議会で混迷を極める</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="オバマとリードが大統領執務室で一緒に微笑みながら座っている。">
  <figcaption>バラク・オバマとハリー・リード。ホワイトハウス・プレス写真。</figcaption>
 </figure>
 <p>火曜日に議会で財政の行き詰まりについて審議され、木曜日の
 期限が近づく中、両議院に政府の再会と国債発行限度額を上げる方法の
 模索を委ねた。</p>
 ...
</article>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-figure-element