figure 要素

HTML5 で導入

概要

HTML <figure> 要素は図表などの自己完結型のコンテンツを表す要素です。多くの場合、キャプション(<figcaption>)を伴って使用され、単独のユニットとして参照されます。メインのフローに関連しつつも、メインのフローとは無関係な位置に配置する事が可能です。この要素は通常、「主なテキストの中から参考文献として参照されるが、メインのフローに影響を与える事無く別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」に対し用います。

使用上の注意:

  • セクショニングルートとなります。<figure> 要素のコンテンツのアウトラインは、ドキュメントの主要なアウトラインから除外されます。
  • キャプションは <figure> 要素の最初または最後の子要素 (子孫要素ではない) として配置した <figcaption> 要素によって表すことができます。
コンテンツカテゴリ フローコンテンツセクショニングルート、パルパブルコンテンツ
許可された内容 <figcaption> 要素、もしくは <figcaption> とそれに続くフローコンテンツ、あるいはフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLElement

属性

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

例 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>

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard  
HTML5
The definition of '<figure>' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 8 4.0 (2.0) 9.0 11.10 5.1
機能 Android 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,