ウェブランサー

<figure> 写真や図表などの自己完結した要素を表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
パルパブル・コンテント
セクショニング・ルート
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 <figcaption>、フロー・コンテンツ
対応ブラウザ <figure>の対応状況を確認する

<figure>タグの説明

<figure>は、写真や図表などの自己完結した要素を表す際に使用します。この要素は、ドキュメントの本題(メインフロー)である/ないに関わらず、その段落でひとまとまりにすることができる要素を表現します。

例えば、ドキュメントの本題(メインフロー)が書かれたテキストの中で、参照される参考文献(写真、図表、コードの断片など)がある場合、メインフローに影響を与える事無く別ページ、または参照先のドキュメントへ移動する手段を提供することが可能になります。

この要素に明示的なキャプションを追加するには、子要素に<figcaption>を追加します。

<figure>タグの特徴

<figure>はページ内に複数使うことができます。この要素自体を入れ子構造にすることもできます。

<figure>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

<figure>タグの使い方とサンプル

<figure>を使ったマークアップのサンプルです。

HTML
<figure>
	<figcaption>この図表のキャプション</figcaption>
	<img src="images/sample.jpg" alt="参照する図表">
</figure>

<figure>に関連するHTMLタグ

コンテンツグループ要素
<blockquote> 引用文であることを表す(長文用)
<dd> 定義した用語の説明を記述する
<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
<div> ブロックレベル要素としての範囲を指定
<dl> 定義リストであることを表す
<dt> 定義する用語を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<figure> 写真や図表などの自己完結した要素を表す
<hr> 区切り線(罫線)を引く
<li> リストの項目を表示する
<menu> リストをメニューとして扱う
<ol> 順序のあるリストを定義する
<p> 段落を指定する
<pre> ソースを整形済みテキストとして表示する
<summary> 詳細内容(<details>)の要約や概要を設定する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<ul> 順序のないリストを定義する