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は次のように表示される。

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

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

属性

次に示す属性を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要素へアクセスできる。

関連記事

• <amp-img>
• <figure>
• <img>

参考文献

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

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