figure要素の使い方

figure要素は、写真、イラスト、図表、ソースコードなどのようなそれ自体が1つの完結した内容になっているフローコンテンツを入れる際に使用します。よって、メインコンテンツから参照されるものを表す必要があります。また、figure要素にキャプションをつける場合にはfigcaption要素を使用します。

figure要素の使用例

figure要素を使ってマークアップした例が以下のようなソースコードになります。

<figure>
  <figcaption>〇〇公園の景色</figcaption>
  <img src="images/sakura.jpg" alt="〇〇公園には100本の桜の木が植えられています。" />
</figure>

figcaption要素を使用する際には1つ注意点があり、figure要素内の1番最初か最後のどちらかに配置しなければならないということです。つまり、途中に挿入することはできないので、以下のようなソースコードは間違いになります。

<figure>
  <h2>〇〇公園</h2>
  <figcaption>〇〇公園の景色</figcaption>
  <img src="images/sakura.jpg" alt="〇〇公園には100本の桜の木が植えられています。" />
</figure>

figure要素を使う場合には、本文と図などの関係に気を付け、またfigcaption要素の挿入場所にも気を付けるようにしましょう。