写真や図（グラフ）とキャプションをマークアップする

figure要素とfigcaption要素を組み合わせて、本文に関連した画像やグラフを正しくマークアップする方法を解説します。

この記事のポイント

HTML5ではfigure要素という要素が定義されています。
この要素は図（グラフ）、写真、イラストがあることを意味します。

そして、その図や写真についての説明を記述するための要素がfigcaption要素です。

<figure>
	<img src="images/pic_sample.jpg" alt="NEWS">
	<figcaption>NEWS</figcaption>
</figure>

HTML5が登場する前は、img要素はインライン要素なのでdiv要素やp要素などのブロックレベル要素の一部として使用する形が一般的でした。
画像にキャプションを入れたい場合はp要素を使いました。

<div>
	<img src="images/pic_sample.jpg" alt="NEWS">
	<p class="text_caption">NEWS</p>
</div>

表示自体にはfigure要素＆figcaption要素を使った場合と大きな違いはありません。

大切なのは表示よりも意味付けにあります。
HTLM5では、「このデータは何を意味するか」を定義するための要素が細かく設定されるようになったため、今回のように「ここに図と説明文が入っている」と明示的に区別ができるようになりました。

例えば、p要素は通常のテキストをマークアップするため汎用性が高く、どんな種類のテキストが書かれているかまでは区別することができませんでした。
しかしfigcaption要素を使うことで、「このテキストは図について紹介している」と意味付けを行うことができます。

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。