figure 要素写真などのまとまりを表す
figure 要素は、挿絵、図表、写真、コードなどのまとまりを表します。
figure 要素によるまとまりは、それ単体で成立するものでなければなりません。つまり、その部分を文書から切り出したとしても、元の文書に影響がないこと、また、切り出した内容自体で意味が通るように使用する必要があります。これは、aside 要素と同様です。
figcaption 要素によって、キャプションを付与することができます。
figure 要素の仕様
- カテゴリ
- コンテンツモデル
-
最初または最後の子として figcaption 要素
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
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>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |