<figure>要素(挿絵や図面などのブロック)。

<figure>要素は HTML 5 で導入されたものです。
HTML 4/XHTML 1には該当する要素はありません。

HTML 5 に於ける、挿絵や図面などのブロックである<figure>要素について解説します。

<figure>要素の概要。

HTML 5 に於ける<figure>要素は、挿絵や図面などのブロックとして定義されております。

HTML 4/XHTML 1には該当する要素はありません。

<figure>要素の定義。

カテゴリ

要素が置ける箇所

フロウ内容要素が置ける箇所。

要素の内容モデル

フロウ内容要素と、必要に応じて、先頭か末尾のどちらか片方に<figcaption>要素を加えられます。

要素で定義された属性

グローバル属性のみ定義されております。

<figure>要素の詳細。

HTML 5 に於ける<figure>要素は、挿絵や図面などの自己完結したブロックです。

従来、HTML 4/XHTML 1では挿絵や図面などをブロックとしてマークアップする適切な方法が存在しませんでした。

このため、例えば、

列挙される項目に見立ててリスト形式で表す
形式的に<div>要素でブロック化する。

などと言った方法が便宜的に採られておりました。

HTML 5 では、新たに<figure>要素を導入する事で、これらのマークアップを可能にしました。

ところで、挿絵や図面にはしばしばキャプションを伴います。

このため、HTML 5 では、専用の要素として<figcaption>要素も定義しております。

<figure>要素の例。

画像を独立したブロックにする場合(1)

<figure class="image">
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <img alt="" src="HORIKITA_Maki.JPG" width="480" height="640" />
    </figure>

尚、<figcaption>要素は必須ではないので、不要なら省略出来ます。

また、内容となる<img>要素は複数あっても構いません。

画像を独立したブロックにする場合(2)

<figure class="image">
    <h1>平成23年度の売り上げ予想</h1>
    <a href="Sales2011-2012.html">
        <img alt="平成23年度の売り上げ予想(テキスト版)" src="Sales2011-2012.GIF" width="640" height="480" />
        </a>
    <figcaption><time datetime="2011-03-11">平成23年 3月11日</time>に発生した東日本大震災の影響で、<a href="Sales2010-2011.html">平成22年度</a>に較べて大幅な減少が予測されます。</figcaption>
    </figure>

<figcaption>要素は<figure>要素の冒頭か末尾のどちらか片方のみに付けられるため、ここではキャプションと呼ぶに相応しい末尾側を<figcaption>要素とし、冒頭はキャプションとする代わりに見出しとしております。

画像を独立したブロックにする場合(3)

<figure class="image">
    <h1>平成23年度の売り上げ予想</h1>
    <object type="image/gif" data="Sales2011-2012.GIF" width="640" height="480" />
        <p>平成23年度の売上げは、以下のように予想しております：</p>
        <dl>
            <dt>平成23年 4月</dt>
            <dd>平成23年 4月は…。</dd>

            <dt>平成23年 5月</dt>
            <dd>平成23年 5月は…。</dd>

            …
            <dt>平成24年 3月</dt>
            <dd>平成24年 3月は…。</dd>
            </dl>
        </object>
    <figcaption><time datetime="2011-03-11">平成23年 3月11日</time>に発生した東日本大震災の影響で、<a href="Sales2010-2011.html">平成22年度</a>に較べて大幅な減少が予測されます。</figcaption>
    </figure>

こちらは、<img>要素の代わりに、<object>要素で画像を埋め込み、画像が閲覧出来ない環境に対しては、当該<object>要素の内容として代替テキストを記述する事で対応しております。

動画を独立したブロックにする場合

<figure class="video">
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <object type="application/x-shockwave-flash" width="176" height="144" data="/video/HORIKITA_Maki.swf">
        <param name="movie" value="/video/HORIKITA_Maki.swf" />
        <param name="autostart" value="false" />
        <param name="allowScriptAccess" value="always" />
        <video width="176" height="144">
            <source type="video/mp4" src="/video/HORIKITA_Maki.MP4" />
            <p>ご覧の環境では動画が表示されませんので、代わりにGIFアニメーションでのスライドショーをご覧ください。</p>
            <img alt="※この箇所にGIFアニメーションでのスライドショーが入ります。" src="/video/HORIKITA_Maki.GIF" width="176" height="144" />
           </video>
        </object>
    </figure>

ここでは、

フラッシュに対応している環境に対しては、<object>要素でフラッシュ動画を埋め込み、
フラッシュに対応していないものの、MPEG 4 動画にネイティヴで対応している環境に対しては、<video>要素と<source>要素でMPEG 4 動画を埋め込み、
それもダメなら、断り書きをテキストで表したうえでGIFアニメーションでのスライドショーを<img>要素で埋め込む

ものとしております。

コンピュータ言語のコードを独立したブロックとして記述する場合

<figure class="code">
    <figcaption>HTML 5 のマークアップ例</figcaption>
    <pre class="HTML">&lt;!DOCTYPE html&gt;
<code>&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"&gt;</code>
    <code>&lt;head&gt;</code>
        <code>&lt;meta charset="shift_jis" /&gt;</code>
        <code>&lt;title&gt;</code> (文書の題名) <code>&lt;head&gt;</code>
        …
        </pre>
    </figure>

この他、

詩歌
格言
アスキィアート

なども、本文と分離され得るブロックであれば、<figure>要素としてマークアップする事が可能です。

注意事項。

<figure>要素の内容モデルについて。

<figure>要素の内容モデルについては、何度か変更が加えられております。

少し前の仕様案では、

<figcaption>要素の代わりに<dt>要素
その他のコンテンツ全体を<dd>要素

を順不同でと言う内容モデルにしておりました。

しかし、この内容モデルでは、

内容に制約が掛かり過ぎる事と、
インターネットエクスプローラ 7.0までで重大な不具合が引き起こされた事

などから、現在の内容モデルに変更されております。

このため、旧来の内容モデルでマークアップしている場合は、変更する必要があります。

キャプションが前後双方に入る場合。

この節には、制作者の私見が入ります。

HTML 5 では、<figure>要素の子要素となるキャプションのために、<figcaption>要素を定めております。

しかし、<figcaption>要素は<figure>要素の内容の先頭か末尾のどちらか片方にのみ入れられる事とされております。

それでは、先頭と末尾の双方にキャプションを入れたい場合はどうすれば良いでしょうか。

この場合、以下のいずれかが考えられます。

先頭のキャプションは見出しとする: 先頭のテキストは、キャプションと言うより寧ろ見出しと言えるので、そのようにマークアップし、<figcaption>要素は末尾のテキストに適用します。
末尾のキャプションは普通のテキストとする: 先頭のテキストは見出しに見立てられるとは言え、通常の用途でも見出しに見える場合も<figcaption>要素とする場合があります。
そのような事を考えると、先頭の部分を<figcaption>要素として、末尾は一般のテキストとして<p>要素などにすれば良いのではないかと言う考えです。

この疑問に対する明確な答えは今のところありません。

このため、どちらが適切かは文書作成者の判断に任せられると言えます。

<figure>要素の内容や前後のマークアップについて。

この節には、制作者の私見が入ります。

<figure>要素の内容とされるものは、本文中に組み込めない画像などが中心となりますので、これらが前後の段落類のマークアップによって明確に切り離されるのであれば問題はありません。

ですが、そうでない場合、特に前後に生テキストが続く場合は、HTML 5 に対応していない環境だとおかしな結果になる事も予想されます。

このため、<figure>要素の内容か前後は、出来るだけ従来のブロックレヴェル要素、すなわち、

とする事を強くお勧めします。

問題が起こりそうな例。

…○月△日の堀北真希ちゃんです：
<figure class="image">
    <img alt="" src="HORIKITA_Maki_MMDD.JPG" width="240" height="320" />
    </figure>
この日の堀北真希ちゃんは…

HTML 5 に対応しているユーザエージェントであれば、恐らく<figure>要素の前後で改行してくれるでしょうが、そうでない場合には前後のテキストと画像がインラインで繋がっておかしくなるかも知れません。

このため、前後のテキストをしっかり<p>要素(段落)としてマークアップするなどの工夫が必要になります。

<p>…○月△日の堀北真希ちゃんです：</p>
<figure class="image">
    <img alt="" src="HORIKITA_Maki_MMDD.JPG" width="240" height="320" />
    </figure>
<p>この日の堀北真希ちゃんは…</p>

本来はこのようにテキストをしっかり段落としてマークアップするのがあるべき姿だと思います。

或いは、<figure>要素の内容そのものをマークアップすると言う方法もあります。

…○月△日の堀北真希ちゃんです：
<figure class="image">
    <p><img alt="" src="HORIKITA_Maki_MMDD.JPG" width="240" height="320" /></p>
    </figure>
この日の堀北真希ちゃんは…

HTML 4/XHTML 1との違い。

<figure>要素は HTML 4/XHTML 1にはありません。