figure 要素写真などのまとまりを表す

figure 要素は、挿絵、図表、写真、コードなどのまとまりを表します。

figure 要素によるまとまりは、それ単体で独立したものでなければなりません。つまり、その部分を文書から切り出したとしても、元の文書に影響がないこと、また、切り出した内容自体で意味が通るように使用する必要があります。これは、aside 要素と同様です。

figcaption 要素によって、キャプションを付与することができます。

サンプルソースを見る

figure 要素の仕様

カテゴリ
コンテンツモデル

最初または最後の子として figcaption 要素

この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
Uses HTMLElement.

figure 要素のサンプルソース

<figure>
 <img src="atami.jpg" alt="熱海で撮影した写真。海をバックに私と母が写っています。" />
 <figcaption>家族で遊びに行った熱海でお母さんと写真撮りました。天気がよくて海がきれいです。</figcaption>
</figure>
<!-- 音声ファイルをマークアップした例 -->
<figure>
 <audio controls="controls">
  <source src="/sample.ogg" type="audio/ogg" />
  <source src="/sample.wav" type="audio/wave" />
  <source src="/sample.mp4" type="audio/mp4" />
  <p>
   サンプルが視聴できます。ブラウザで再生できない場合は、下記からダウンロードしてご試聴ください。
   <a href="/sample.mp3" type="audio/mp3">ファイルのダウンロードはこちら(MP3 / 1.2MB)</a>
  </p>
 </audio>
 <figcaption>私が自分で作曲した 「<cite>サッカー賛歌</cite>」 を視聴できます。</figcaption>
</figure>
<!-- ソースコードをマークアップした例 -->
<figure>
 <figcaption>jQuery によるサンプルソースです。</figcaption>
 <pre>
  <code class="language-javascript">
   $(function(){
    $('#menuButton').click(function() {
     $('#menu').toggle('fast');
    });
   });
  </code>
 </pre>
</figure>

W3C HTML5 仕様書

4.5.11 The figure element