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

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

属性

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

使用上の注意

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

例1

<!-- figure 単体 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">
</figure>
<p></p>
<!-- figcaption が付いた figure -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">	
  <figcaption>MDN ロゴ</figcaption>
</figure>
<p></p>
MDN ロゴ
MDN ロゴ
図1 MDN ロゴ

例2

<figure>
  <figcaption>Get browser details
using navigator</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>
Get browser details using navigator
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;
}            
  

例3

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

"デバッグがソフトウェアのバグを取るプロセスであるならば、
プログラミングはそれを入れるプロセスだ"

例4

<figure> 要素は詩のマークアップに使用できます。

<figure>
 <p>
  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>

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.

Venus and Adonis. By: William Shakespeare

仕様書

仕様書 状態 備考
HTML Living Standard
<figure> の定義
現行の標準  
HTML5
<figure> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応8 あり49115.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4115.1 あり

関連情報

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

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