最終更新日 
figure要素
figure要素は、イラスト、図表、写真、ビデオ、ソースコード、詩など、ドキュメント本体とは独立したコンテンツのグループを表すために使われます。Flowコンテンツであればfigure要素に含めることができます。
figure要素のコンテンツのキャプションを表すものとして、子要素にfigcaption要素を使用できますが、必須ではありません。
figure要素のコンテンツは自己完結型であり、ドキュメント本体の流れに影響を与えることなく、それだけを切り離してページのサイドバーや新しいページといった別の場所で使用できます。
figure要素は、Flowコンテンツの記述箇所で使用可能です。
HTML5での変更点
・figure要素は、HTML5で追加された新しい要素です。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Flowコンテンツ Sectioningルート |
省略不可 | Flowコンテンツを子にできる要素 | figcaption、Flowコンテンツ |
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | - |
| イベント属性 | - | - |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マクドエイド</title>
</head>
<body>
<p>新発売の「トマトビッグチキン」です。</p>
<figure>
<figcaption>トマトビッグチキン</figcaption>
<img src="tomatobigchicken.jpg" alt="トマトビッグチキン">
</figure>
</body>
</html>
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。