最終更新日

figure要素

figure要素は、イラスト、図表、写真、ビデオ、ソースコード、詩など、ドキュメント本体とは独立したコンテンツのグループを表すために使われます。Flowコンテンツであればfigure要素に含めることができます。

figure要素のコンテンツのキャプションを表すものとして、子要素にfigcaption要素を使用できますが、必須ではありません。

figure要素のコンテンツは自己完結型であり、ドキュメント本体の流れに影響を与えることなく、それだけを切り離してページのサイドバーや新しいページといった別の場所で使用できます。

figure要素は、Flowコンテンツの記述箇所で使用可能です。

HTML5での変更点
・figure要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Sectioningルート
省略不可 Flowコンテンツを子にできる要素 figcaptionFlowコンテンツ
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>新発売の「トマトビッグチキン」です。</p>
    <figure>
      <figcaption>トマトビッグチキン</figcaption>
      <img src="tomatobigchicken.jpg" alt="トマトビッグチキン">
    </figure>
  </body>
</html>
参考文献:W3C HTML5「4.5.11 The figure element」外部リンク
HOME