【HTML】figureタグとfigcaptionタグで自己完結コンテンツを定義

このページについて

このページではHTMLで使うことができるfigureとfigcaptionの2つのタグの使い方を解説しています。

figureは簡単にいうと「自己完結型コンテンツを定義」という感じになります。詳しく書くと画像やら写真やらを掲載するタグなんですが、この写真が消えても文書には影響がないとか、そういう感じのものに対して適用します。

そのfigureで定義した画像などに対して説明などを書くためのタグが、次に紹介するfigcaptionです。

figcaptionはfigureで定義した自己完結コンテンツに対する説明などを書くためのタグになります。

実際にfigureとfigcaptionを使った、自己完結コンテンツの定義の仕方を見ていきます。

<figure>

<img src="画像URL">

<figcaption>画像の説明文など</figcaption>

</figure>

基本的にはこのように、画像などをまるっと囲んで仕舞えばOKです。そして画像の下にはキャプションを定義するfigcaptionを書いています。ブラウザで見てみると

今回はプロフィール画像として使用しているワニガメの画像をfigureで囲んでみました。そしてその下には、figcaptionで書いたキャプションがあります。中身は見ての通り「ワニガメ」だけです。

figureで使える固有の属性は無く、グローバル属性・イベント属性のサポートをしています。

こちらもfigureと同じく、固有の属性はありません。グローバル属性・イベント属性のサポートをしています。

figureは「ドキュメントに関連はしているけど、画像だけ消えても特に問題は無いよね」みたいな、ドキュメントに対して影響を及ぼさない自己完結コンテンツの定義をすることができます。

figcaptionはそんなfigureで囲んだ画像に対するキャプションを設定することができます。

どちらも必須というようなタグでは無いにしても、あるとブラウザがより正確に解釈しやすくなるかなと思ったりもします。