MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

HTML <figure> 要素は図表などの自己完結型のコンテンツを表す要素です。多くの場合、キャプション (<figcaption>) を伴って使用され、単独のユニットとして参照されます。

コンテンツカテゴリー フローコンテンツセクショニングルート、パルパブルコンテンツ
許可された内容 <figcaption> 要素、もしくは <figcaption> とそれに続く フローコンテンツ、あるいはフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツ を受け入れるすべての要素
許可された ARIA ロール grouppresentation
DOM インターフェイス HTMLElement

属性

この要素には、すべての要素で使用可能な グローバル属性 以外に指定可能な属性はありません。

使用上の注意

  • この要素は通常、「ドキュメントの主なフローの中から参考文献として参照されるが、メインのフローに影響を与えることなく別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」に対し用います。
  • セクショニングルート となります。<figure> 要素のコンテンツのアウトラインは、ドキュメントの主要なアウトラインから除外されます。
  • キャプションは <figure> 要素の内部に (最初または最後の子要素として)配置した <figcaption> 要素によって表すことができます。

例 1

<!-- 使用例 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">
</figure>
<p></p>
<!-- figcaption 要素と併用する場合の例 -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
MDN Logo
MDN Logo
Fig1. MDN Logo

例 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>"If debugging is the process of removing software bugs,
  <br />
  then programming must be the process of putting them in"</p>
</figure>
Edsger Dijkstra :-

"If debugging is the process of removing software bugs,
then programming must be the process of putting them in"

例 4

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

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>

仕様

仕様書 策定状況 コメント
HTML Living Standard
<figure> の定義
現行の標準  
HTML5
<figure> の定義
勧告  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 8 (有) 4.0 (2.0) 9.0 11.10 5.1
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 3.0 (有) 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

関連情報

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

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