HTML5で図や画像にキャプションを付けるためのタグが追加されました。ここではHTML5でキャプションを持った図や画像をマークアップする方法を説明します。
figure要素とfigcaption要素
図や画像にキャプションを付けるにはfigure要素とfigcaption要素を使います。
figure要素は、一般に文書の本文から参照される図、画像、コード片などの自己完結型のコンテンツを表します。 子要素としてキャプションを付けるためのfigcaption要素を追加することができます。 figcaption要素は、figure要素のコンテンツのキャプションを表します。
キャプションを付ける例
<figure>
<img src="img/tiger.jpg"
alt="トラの顔のアップ画像です。">
<figcaption>Tiger</figcaption>
</figure>
figure要素は子要素としてimg要素とfigcaption要素を持っています。この例でfigure要素で囲まれたコンテンツは画像（img要素）です。figcaption要素はこの画像のキャプションを表しています。
以下に実際の出力例を示します。ただし、この記事はWordPressを使っているので、実際のソースコードは上の例とは少し異なります。CSSで装飾すれば出力結果もずっと良くなるでしょう。
いかがでしたでしょうか。figure要素で画像などのコンテンツとそれに対するキャプションを一つにまとめることができるようになったので、構造としてより分かり易くなったのではないでしょうか。また、CSSでの装飾もしやすくなると思います。