HTML & CSS

レシピ

マークアップ

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

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

この記事のポイント

  • 図(グラフ)や写真をデータ構造的に正しくマークアップする
  • 補足の説明文(キャプション)をマークアップする

目次

画像ファイルをキャプションとセットでマークアップする

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

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

コード例

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

XHTMLやHTML4以前のマークアップ例と比較

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要素を使うことで、「このテキストは図について紹介している」と意味付けを行うことができます。

こちらの記事は役に立ちましたか?

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

ありがとうございます。
コメントを送信しました。