HTML5で画像にキャプションを付ける

画像にキャプションを付けるために、img タグの下に p タグでキャプションを付けていたが、繋がりのない2つのタグで1つの要素を表すのが何だかスマートではない。そこで少し調べたところ、HTML5 では figure と figcaption タグで画像などの要素に、キャプションが付けられるようになっていた。

divとpタグの場合

<div>
  <img src="http://example.com/foo.jpg" />
  <p>キャプション</p>
</div>

figureとfigcaptionの場合

<figure>
  <img src="http://example.com/foo.jpg" />
  <figcaption>キャプション</figcaption>
</figure>

これで画像のキャプションであるという意味がハッキリして、CSSでのデザインもよりやりやすくなった。