figcaption - figure要素コンテンツのキャプションや説明文を定義

figure要素の最初または最後の子要素として配置します。

figcaption要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
figcaption - - -

figcaption要素のHTML4からHTML5への変更点

figcaption要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「コードをマークアップしたfigure要素」のサンプル

HTMLコード

<figure id="l4">
 <figcaption>キャプション</figcaption>
 <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence&lt;byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「コードをマークアップしたfigure要素」のサンプルプレビューを確認

「写真をマークアップしたfigure要素」のサンプル

HTMLコード

<figure>
  <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替えテキスト">
  <figcaption>キャプション</figcaption>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「写真をマークアップしたfigure要素」のサンプルプレビューを確認

「figureではない画像と、figureによる画像とビデオ」のサンプル

HTMLコード

<h2>figureではない画像と、figureによる画像とビデオ</h2>
<p>figure要素を使っていない例:</p>
<blockquote>
 <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替テキスト">
</blockquote>

<p>figure要素によりマークアップされた画像例</p>
<figure>
 <img src="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg" alt="代替テキスト">
 <figcaption>キャプション</figcaption>
</figure>

<p>figure要素によりマークアップされたvideo要素</p>
<figure>
 <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls></video>
 <figcaption>videoキャプション</figcaption>
</figure>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「figureではない画像と、figureによる画像とビデオ」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/grouping-content.html#the-figcaption-element)