[18] figure 要素は、 図を表します。

意味

[23] figure 要素は図表を表すために使うことができます。 図表には一般的に「図1. 小学生の平均身長」のような題名が付されていることが多いですが、 figure 要素はそうでなくても使うことができます。

[24] ここでいう図表というのは、 img 要素や table 要素という意味ではありません。文書の一部を構成するものの本文自体には含まれないような独立した部分であれば、 広く用いることができます。具体的には、写真、表、 詩、プログラムコード、引用文、列挙、 公式や定理を含む数式や化学式、 ASCIIアート、地図などに使えます。

[25] 雑誌や論文などでは、図表は本文の流れから離れてページの端などにまとめる形で配置される場合があります。 しかし figure 要素はそうした表示方法に限定されるものではなく、 通常の CSS の指定により任意の方法で表示できます。 もちろん float などで本文とは離して表示することもできますし、 何も指定せず本文の流れの中で表示することもできます。 display: fixed など紙媒体とは異なる手法で表示しても構いません。

[26] ページの最後に関連事項のコラムが付属している場合のように、 図表とは違って本文との関係性が強くない場合には、 aside 要素を使うことができます。[27] 他のHTML要素同様に、 figure 要素は必ず使わなければならないというものではありません。 著者が図表だと判断すれば使うことができますし、図表とは思わない、 図表と明示する必要性が薄いと判断すれば figure 要素を使わなくて構いません。 figure 要素を使うべきか迷うのであれば、使わなくて構いません。

内容

[32] figcaption 要素を先頭または末尾のいずれかに高々 1つ置くことができます。

[33] 論文などでは、 表題は上側、図題は下側といったスタイルガイドが定められていることがあります。 しかし HTML ではそうした内容に依存した制約はありません。

imggroup 要素 (DTBook)

[36] HTMLもどきの DTBook には imggroup 要素があります。

[38] HTML とほぼ同じ img 要素があってそのまま使うこともできますが、 imggroup 要素でいくつかグループ化したり、 caption や prodnote と組み合わせたりできました。

[39] 後の HTML の figure / figcaption を先取りした形といえます。

関連

[34] 表については、 table 要素と caption 要素があります。これは figure 要素の特殊ケースとも言えます。

[35] fig 要素とは異なります。

歴史

[40] に HTML DTD に追加されました。 現在の figure に相当すると思われます。 しかしこのとき限りの実験に終わり、以後の DTD には出現しません。

[216] HTML要素概説
要素名
fig
日付
説明
、 HTML DTD に fig が追加された。 現在の figure に当たると思われる。 >>43 HTML19940407
注釈
  • [43] しかしこのとき限りに終わり、以後の HTML DTD に出現しない。
[284] HTML要素概説
要素名
fig
要素名
caption
日付
説明
版 HTML3 Linking and Embedding Model に、 fig, caption が将来拡張案として示されている。 insert と併用する。 >>44 現在の figure, figcaption, object に当たる。
出典
  • [44] HTML3 Linking and Embedding Model, , Working Draft, , , https://www.w3.org/TR/WD-insert-951220.html

HTML5

[41] the figure element and associated trappings, Hixie, , https://github.com/whatwg/html/commit/32bff0ac1cc9a040ec4d45fdea206b4e9ce09059#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[42] HTML要素概説
要素名
figure
日付
説明
、 HTML5 に figure が追加された。 現行仕様である。
出典
  • HTML5 r365, , , https://github.com/whatwg/html/commit/32bff0ac1cc9a040ec4d45fdea206b4e9ce09059

[1] Re: several messages about <figure> and related subjects (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13332 (名無しさん)

[2] IRC logs: freenode / #whatwg / 20091219 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20091219

[14] IRC logs: freenode / #whatwg / 20100107 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100107#l-220

[3] [whatwg] Various threads with feedback on HTML elements ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-October/041109.html

[4] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=4635&to=4636

[5] Web Applications 1.0 r7991 Broaden the possible use case for <figure>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7990&to=7991

[6] Web Applications 1.0 r3859 Parser changes: <dc>, <ds>, <dialog> are now treated differently. Styling changes: <dialog>, <dc>, <ds>, and <details> are now treated differently. Semantic changes: Dropped <dialog>. <figure> and <details> now use <dt>/<dd> instead of <legend>. Editorial changes: Added a section on how to mark up conversations, moved the sections on footnotes and tag clouds around. Updated lots of examples. Validator changes: Changed rules for missing alt= given the new elements.]] ( ( 版)) http://html5.org/tools/web-apps-tracker?from=3858&to=3859

[7] Web Applications 1.0 r8550 Adjust how <figure> gives captions to <img>s to exclude cases where <img>s are not alone ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8549&to=8550

[8] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html

<figure>

<img src="" alt="" width="20" height="20" />

</figure>

<span class="username">$USERNAME</span>

[9] 時事ドットコム:文化庁の京都移転有力に=「一部機能」軸に検討-政府 ( 版) http://www.jiji.com/jc/zc?k=201512/2015123000492&g=pol

<div id="article-body">

<figure>

<div class="figure" style="width:200px;float:right;">

<a href="/jc/zc?g=pol&k=201512/2015123000492&p=151230kat23&rel=pv"><img src="../news/kiji_photos/151230kat23_t.jpg" align="right" ></a>

<figcaption><div class="figcaption">政府機関の地方移転で、有力候補とされる文化庁が入る合同庁舎=22日、東京都千代田区</div></figcaption>

</div>

</figure>

<p>

政府は年明け以降、

[10] 【今日は何の日?】あこぎという駅が開業 | 乗りものニュース ( 版) http://trafficnews.jp/post/47402/

駅名は「あこぎ」と読みます。</p>

<figure><a href="http://trafficnews.jp/post/47402/151231_akogi_01/"><img src="http://trafficnews.jp/assets/2015/12/151231_akogi_01-600x400.jpg"></a><figcaption>阿漕駅は津駅の隣にある(2013年4月、恵 知仁撮影)。</figcaption></figure><p>「あこぎ」という単語には

[11] 【茨城新聞】つくばみらい・陽光台小披露 木を多用、開放感 ( ()) http://ibarakinews.jp/news/newsdetail.php?f_jun=14267651108083

<dl id="photo" style="width:300px;float:right;padding:5px 0px 5px 10px;">

<dt style="float:left"><img src="http://ibarakinews.jp/photo/14267651108083_1.jpg" alt="廊下側の壁が三角形に空いている教室を見学する内覧会の参加者=陽光台小"></dt>

<dd style="background-color:rgba(255,255,255,0.7);float:left;width:280px">廊下側の壁が三角形に空いている教室を見学する内覧会の参加者=陽光台小</dd>

</dl>

[12] HTML5における<figure>タグの使い方 | UX MILK ( ()) http://uxmilk.jp/33364

<figure>タグは、図や表などをグループ化する際に使用します。

同じように画像などをマークアップするものに、<p>タグがありましたが、HTML5からは、図や表は<figure>でマークアップすることでより文章構造として正しいマークアップが可能になり、推奨されています。ただし、<figure>を使えるのは、独立している自己完結できる内容に限定されます。独立している内容というのは、たとえ違うページにあったり、ページのどこにあっても、コンテンツが成り立っている状態のものです。

画像などであっても、文章などから独立しておらず、前後のコンテンツがないと成り立たないものの場合は、<figure>タグではなく、<p>タグを利用する必要があります。

[13] >>12 本文読んでも「グループ化」の意味がわからなかった。 開始タグと終了タグで囲むことを「グループ化」と呼ぶのだろうか?

[15] >>12 どこで誰が「推奨」しているのかわからない (少なくても HTML Standard では無さそう)。「独立」していなければ p を使え、 というのもよくわからない。

[16] 8月23日からタイ標準時を導入 | チエンマイブログ日々雑感 ( ()) http://payap.net/blog/2008/08/8%E6%9C%8823%E6%97%A5%E3%81%8B%E3%82%89%E3%82%BF%E3%82%A4%E6%A8%99%E6%BA%96%E6%99%82%E3%82%92%E5%B0%8E%E5%85%A5

<fieldset><legend>バンコク週報、タイの情報</legend>【社会】<br /> 海軍・河海測量局がタイ標準時を決定・管理することが決まり、国内のテレビ・ラジオ局などは8月23日からこの標準時に従うことが義務づけられた。&#8230;&#8230;..以下略&#8230;&#8230;&#8230;&#8230;</fieldset>

<p>明日からですが&#8230;&#8230;&#8230;.これでズレが無くなるのかな?</p>

[17] match the W3C in preferring `footer`s instead of `figcaption`s to give attribution for `blockquote`s in `figure`s · Issue #1650 · whatwg/html () https://github.com/whatwg/html/issues/1650

[19] Expand on example and other ways of referencing (domenic著, ) https://github.com/whatwg/html/commit/d43036c99ab37ef1ce0c1eeaf747aa447872b155

[20] dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html () https://github.com/whatwg/html/pull/2841

[21] dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html () https://github.com/whatwg/html/pull/2841

[22] dfn what it means for elements to be “referenced” (sideshowbarker著, ) https://github.com/whatwg/html/commit/d0872abf29373f284c93434875e2e30d12602081

[28] 25552 – Shouldn't <figure> also allow intermixed script-supporting elements (before/after the <figcaption>)? () https://www.w3.org/Bugs/Public/show_bug.cgi?id=25552

[29] updated figure mapping to reflect figure role in core-aam (stevefaulkner著, ) https://github.com/w3c/html-aam/commit/037f1d93862ee027e9ed9b86f9da55347f7e5264

[30] figure/figcaption sparse flow content not valid · Issue #2450 · whatwg/html () https://github.com/whatwg/html/issues/2450

[31] Restrict the main element to be used once per document (annevk著, ) https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086