[23]
figure 要素は図表を表すために使うことができます。
図表には一般的に「図1. 小学生の平均身長」のような題名が付されていることが多いですが、
figure 要素はそうでなくても使うことができます。
[24]
ここでいう図表というのは、 img 要素や table
要素という意味ではありません。文書の一部を構成するものの本文自体には含まれないような独立した部分であれば、
広く用いることができます。具体的には、写真、表、
詩、プログラムコード、引用文、列挙、
公式や定理を含む数式や化学式、
ASCIIアート、地図などに使えます。
[25]
雑誌や論文などでは、図表は本文の流れから離れてページの端などにまとめる形で配置される場合があります。
しかし figure 要素はそうした表示方法に限定されるものではなく、
通常の CSS の指定により任意の方法で表示できます。
もちろん float などで本文とは離して表示することもできますし、
何も指定せず本文の流れの中で表示することもできます。
display: fixed など紙媒体とは異なる手法で表示しても構いません。
[32] figcaption 要素を先頭または末尾のいずれかに高々
1つ置くことができます。
imggroup 要素 (DTBook)[36] HTMLもどきの DTBook には
imggroup
要素があります。
[38]
HTML とほぼ同じ img 要素があってそのまま使うこともできますが、
imggroup 要素でいくつかグループ化したり、
caption や prodnote と組み合わせたりできました。
[39]
後の HTML の figure / figcaption を先取りした形といえます。
[34] 表については、 table 要素と caption
要素があります。これは figure 要素の特殊ケースとも言えます。
[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
<figure>
<img src="" alt="" width="20" height="20" />
</figure>
<span class="username">$USERNAME</span>
<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>
政府は年明け以降、
駅名は「あこぎ」と読みます。</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>「あこぎ」という単語には
<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>
<figure>タグは、図や表などをグループ化する際に使用します。
同じように画像などをマークアップするものに、<p>タグがありましたが、HTML5からは、図や表は<figure>でマークアップすることでより文章構造として正しいマークアップが可能になり、推奨されています。ただし、<figure>を使えるのは、独立している自己完結できる内容に限定されます。独立している内容というのは、たとえ違うページにあったり、ページのどこにあっても、コンテンツが成り立っている状態のものです。
画像などであっても、文章などから独立しておらず、前後のコンテンツがないと成り立たないものの場合は、<figure>タグではなく、<p>タグを利用する必要があります。
[13] >>12 本文読んでも「グループ化」の意味がわからなかった。 開始タグと終了タグで囲むことを「グループ化」と呼ぶのだろうか?
[15] >>12 どこで誰が「推奨」しているのかわからない (少なくても HTML Standard
では無さそう)。「独立」していなければ p を使え、
というのもよくわからない。
<fieldset><legend>バンコク週報、タイの情報</legend>【社会】<br /> 海軍・河海測量局がタイ標準時を決定・管理することが決まり、国内のテレビ・ラジオ局などは8月23日からこの標準時に従うことが義務づけられた。……..以下略…………</fieldset>
<p>明日からですが……….これでズレが無くなるのかな?</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
aside要素を使うことができます。