figure 要素

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

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

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

<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>