HTML の <figure> 要素は、図表などの自己完結型のコンテンツを表す要素であり、多くの場合、キャプション(<figcaption>)と一緒に使用され、ふつう1つの単位として参照されます。

コンテンツカテゴリ フローコンテンツ, 区分化ルート, 知覚可能コンテンツ
許可されている内容 <figcaption> 要素とそれに続くフローコンテンツ、またはフローコンテンツとそれに続く<figcaption> 要素、またはフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール group, presentation
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性のみがあります。

使用上の注意

  • ふつう <figure> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。
  • 区分化ルートとなり、 <figure> 要素のコンテンツのアウトラインは、文書の本文のアウトラインから除外されます。
  • キャプションは <figure> 要素の中に(最初または最後の子要素として) <figcaption> 要素を挿入することで表すことができます。

画像

<!-- 単なる画像 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="MDN の文字の上にロボットモンスター">
</figure>

<!-- キャプションが付いた画像 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="MDN の文字の上にロボットモンスター">	
  <figcaption>MDN ロゴ</figcaption>
</figure>

コードスニペット

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}</pre>
</figure>

引用

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>デバッグがソフトウェアのバグを取るプロセスであるならば、
  プログラミングはそれを入れるプロセスだ。</blockquote>
</figure>

<figure>
  <p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
  Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
  Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
  Not gross to sink, but light, and will aspire.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

仕様書

仕様書 状態 備考
HTML Living Standard
<figure> の定義
現行の標準  
HTML 5.2
<figure> の定義
勧告 HTML 5.0 から変更なし。
HTML5
<figure> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 8Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 11Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank
最終更新者: mfuji09,