HTML

figcaption要素

　figcaption要素は、figure caption の略であり、親要素となる figure要素内に配置したイラストなどの注釈の絵、図、写真、ソースコードなどの自己完結型のコンテンツのキャプション（タイトル）や説明を表します。

　figure要素はメインコンテンツとは別に自己完結している内容であるため、figure要素内のコンテンツにタイトルや説明など、補足情報を加える必要がある際に使用します。ただし、figcaption要素は省略可能です。

　figcaption要素は figure要素の最初または最後の子要素として使わなければいけません（HTML5.1では figure要素の子要素として任意の位置）。figure要素以外の中で使う事は出来ませんので注意してください。詳細については、figure要素の項をご覧ください。

＞＞figure要素（キャプション付き図画）

<figure>
	<figcaption>図画のキャプションを表します</figcaption>
	<!-- イラストなどの注釈の絵、図、写真、ソースコードなど -->
</figure>

　figcaption要素は、figure要素内の最初か最後のどちらかにのみ（１つだけ）配置することができます。（HTML 5.1の場合は任意の位置に配置できます）

<figure>
	<figcaption>図画のキャプション</figcaption>
	<p><img src="sample.png" alt="サンプル"></p>
</figure>

<figure>
	<p><img src="sample.png" alt="サンプル"></p>
	<figcaption>図画のキャプション</figcaption>
</figure>

　２つのキャプションを配置したい場合は、次のように最初のキャプションを見出しとするか、

<figure>
	<h1>図画のタイトル</h1>
	<p><img src="sample.png" alt="サンプル"></p>
	<figcaption>図画の説明</figcaption>
</figure>

　後ろのキャプションを p要素などで配置すると良いようです。

<figure>
	<figcaption>図画のタイトル</figcaption>
	<p><img src="sample.png" alt="サンプル"></p>
	<p>図画の説明</p>
</figure>

バージョンアップによる変更点

　figcaption要素は、HTML5から新たに追加された要素です。

　HTML5.1では、figcaption 要素の配置位置に関する制限が緩くなりました。

属性

　この要素にはグローバル属性のみがあります。

figcaption 要素の概要

カテゴリー

なし

コンテンツ･モデル

フレージング･コンテンツ

利用可能な場所

figure要素の最初または最後の子要素でなければなりません（HTML5.1では figure要素の子要素として任意の位置）

開始タグ

必須

終了タグ

必須

要素固有の属性

なし

標準的なスタイル

figcaption {
	display: block;
}

許可されている ARIAロール

group、presentation

DOMインターフェイス

HTMLElement

figure要素・figcaption要素のメリット

　figure要素や figcaption要素を使用するメリットは、文書構造を分かりやすくできて、SEO対策となる点です。

　HTMLでコーディングをする際に重要なのは、HTMLを見ただけで、どのタグでどのような内容を記述しているのかを分かるようにすることです。メインコンテンツとそれ以外のコンテンツを区別することで文書構造が分かりやすくなります。たとえば、figure要素は参照部分、aside要素はセクショニング要素として、補足的な部分であることを表して、タグの種類ごとにグループ化します。

　文書構造が理解しやすくなると、Googleの検索エンジンで様々な Webサイトの情報を収集するクローラーが、Webサイトのページを見つけやすくなります。クローラーが収集した情報に基づいて検索結果の順序が決定されるので、HTMLの文書構造を分かりやすくすることは、SEO対策の１つです。

figcaption要素の用途は？

alt属性との違い

alt属性とは？

　alt属性とは、画像の代替テキストとなり、文字や音声として、画像の情報を獲得できるようにするタグです。画像が表示されない場合でも代替テキストが設定されていれば、ユーザーはその画像がどのような内容なのかを理解できます。

　また、視覚障がい者の方に、音声で画像の内容を伝えられるようにするためにも、alt属性の設定は重要です。

alt属性と figcaption要素の用途の違い

　alt属性は画像に関する情報を記述するための属性であるなら、figcaption要素を使う必要はあるのかと考える人もいるでしょう。しかし、figcaption要素は figure要素の図表の注釈や見出し、説明のために用いられるので、画像の内容を記述する alt属性とは用途が異なります。

　また、alt属性はテキストを画像などのコンテンツの下に表出しませんが、figcaption要素のテキストは表出する点でも違いがあります。

figcaption要素 + CSS

<figure>
	<img src="sample.jpg" alt="サンプル">
	<figcaption>図画のキャプション</figcaption>
</figure>

figure {
	border:thin gray solid;
	margin:auto;
	max-width:220px;
	padding:5px;
}

figcaption {
	background-color:#222;
	color:#fff;
	margin-top:-7px;
}