HTML <figure>

<figure>は図とキャプションを表わすHTML要素です。この記事では、<figure>タグの使い方をサンプルを交えてご紹介しています。

構文

タグ名は大文字と小文字を区別しない。終了タグは省略できない。

<figure>
  <!-- flow content -->
</figure>

サンプル

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

<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

横並び

figure要素を横並びにするには、CSSのdisplayプロパティにinline-blockを指定する。

<figure style="display: inline-block">
  <img src="/img/rome.webp">
  <figcaption>Figure 1 Rome</figcaption>
</figure>
<figure style="display: inline-block">
  <img src="/img/paris.webp">
  <figcaption>Figure 2 Paris</figcaption>
</figure>
<figure style="display: inline-block">
  <img src="/img/new-york.webp">
  <figcaption>Figure 3 New York</figcaption>
</figure>

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

Rome
Figure 1 Rome
Paris
Figure 2 Paris
New York
Figure 3 New York

コンテンツモデル

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

オーディオ・プレイヤーにキャプションを付ける例を以下に示す。

<figure>
  <audio controls src="/media/example.mp3"></audio>
  <figcaption>波の音</figcaption>
<figure>
波の音

属性

以下に示す属性をfigureタグに指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<figure class="responsive">
  <img src="/img/portrait.webp">
</figure>
data-*
カスタムデータ属性を指定する。
id
このHTML文書内で一意な識別子を指定する。この要素をCSSやJavaScriptから識別するのに使用する。 
<figure id="rome">
  <img src="/img/rome.png">
  <figcaption>Figure 1 Rome</figcaption>
</figure>
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。 
<figure style="display: inline-block">
  <img src="/img/rome.jpg">
  <figcaption>Figure 1 Rome</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属性

JavaScriptからfigure要素のカスタムデータ属性を取得する例を以下に示す。

<figure id="p1001" data-author="tsuka" data-publisher="Puffin">
</figure>
<script>
  const e = document.querySelector('#p1001')
  if ('author' in e.dataset === true) {
    console.log(e.dataset.author)
  }
  if ('publisher' in e.dataset === true) {
    console.log(e.dataset.publisher)
  }
</script>

関連記事

AMPの <amp-img> タグ

HTMLの <figcaption> タグ

HTMLの <img> タグ

参考文献

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