HTML <figcaption>

<figcaption> は画像のキャプションを表すHTMLタグである。

なお、「JISX4051 日本語文書の組版方法」において、図のキャプションは図の下に配置するよう決められている。

10.2 図・写真等のキャプション及び注記処理

10.2.1 キャプション及び注記の配置位置及び組方向 キャプション及び注記の配置位置及び組方向は，次による。

a) キャプション及び注記の組方向の既定値は，横書きとする。

b) キャプションの配置位置は，すべての図・写真等において注記を含まない場合は図・写真等の本体の下側，注記を含む図・写真等がある場合は図・写真等の本体の上側に配置するのがよい。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。figcaption要素の終了タグは省略できない。

<figcaption>
  <!-- flow content -->
</figcaption>

図の下にキャプションをつけるサンプルを示す。

<figure>
  <img src="/img/portrait.webp">
  <figcaption>図1 Tsukamoto Hiroyuki</figcaption>
</figure>

上記のHTMLは次のように表示される。

avator
図1 Tsukamoto Hiroyuki

図のキャプションは上につけることもできる。

<figure>
  <figcaption>図1 Tsukamoto Hiroyuki</figcaption>
  <img src="/img/portrait.webp">
</figure>
図1 Tsukamoto Hiroyuki
avator

属性

次に示す属性をfigcaptionタグに指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<figcaption class="pt-2">GDP</figcaption>
data-*
カスタムデータ属性を指定する。
id
このHTML文書内で一意な識別子を指定する。この要素をCSSやJavaScriptから識別するのに使用する。 
<figcaption id="fig1">GDP</figcaption>
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。 
<figcaption style="color: gray">GDP</figcaption>

コンテンツモデル

figcaption要素の開始タグと終了タグの間にはフローコンテンツを含めることができる。具体的には、以下に示す要素である。

親要素

figcaptionの親要素はfigure要素である。figcaption要素は、figure要素の最初の子要素または最後の子要素でなければならない。

JavaScript

JavaScriptからHTMLElementインタフェースを通じてfigure要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー（読取り専用）
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか（読取り専用）
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
style string style属性
tabIndex number tabIndex属性
title string title属性

関連記事

参考文献

Web Hypertext Application Technology Working Group (2022) "Grouping content" HTML Living Standard

日本産業標準調査会 (2022) 日本産業規格