仕様

FIGCAPTION要素は、
図表などの
自己完結型のコンテンツの
キャプションを
表します。

figcaption図のキャプション (Figure Caption)
カテゴリなし
種類通常要素
この要素を
使用できる
状態		figure要素の子要素として。
許可されて
いる内容		フローコンテンツ。
属性グローバル属性のみ。
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		group, presentation, none.
[既定値 : なし]
DOM
インター
フェイス		HTMLElement
レンダリング
フローコンテンツ
  1. figcaption {
  2. display: block;
  3. unicode-bidi: isolate;
  4. unicode-bidi: bidi-override;
  5. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
figcaption要素は、図表などの自己完結型のコンテンツのキャプションを表します。

figcaption要素は、figcaption要素の親 figure要素（存在する場合）の残りのコンテンツのキャプションまたは凡例を表します。

  1. <figure>
  2. <figcaption>
  3. <h3>caption</h3>
  4. </figcaption>
  5. <img src="./hani_c0504.gif" alt="Sample gif">
  6. </figure>

caption

Sample gif
参照元
  1. HTML Living Standard. 4.4.13 The figcaption element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.4.13 The figcaption element
  4. MDN Web Docs. HTML <figcaption>: 図キャプション要素

使用可能な箇所

figure要素に
配置できます。

figcaption要素は、figure要素の最初の, または最後の子要素として、配置できます。

  1. <figure>
  2. <figcaption>caption</figcaption>
  3. <img src="./hani_c0504.gif" alt="Sample gif">
  4. </figure>

figure要素のコンテンツの一部として figcaption要素を配置できます。

caption
Sample gif

配置できるコンテンツ

フローコンテンツを
配置できます。

figcaption要素は、フローコンテンツを配置できます。

  1. <figure>
  2. <figcaption>
  3. <h3>caption</h3>
  4. </figcaption>
  5. <img src="./hani_c0504.gif" alt="Sample gif">
  6. </figure>

figcaption要素のコンテンツの一部として、フローコンテンツである h3要素を配置できます。
figure要素がセクショニング・ルートなので、見出しのレベルは祖先のアウトラインには影響しないので１から使えます。

caption

Sample gif

属性

グローバル属性のみ、
設定できます。

figcaption要素は、グローバル属性のみ 設定できます。

気を付ける点