HTMLの <figcaption> タグ

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

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

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

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

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

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

構文

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

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

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

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

図1 Tsukamoto Hiroyuki

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

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

属性

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

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。
id
このHTML文書内で一意な識別子を指定する。この要素をCSSJavaScriptから識別するのに使用する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

コンテンツモデル

figcaption要素はフローコンテンツを内容に含めることができる。具体的には、以下に示す要素である。

親要素

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

JavaScript

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

参考文献

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

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