文脈まで考えたマークアップの話です。書いてることはマニアックな雰囲気ですが、まじめにHTMLを書いてると必ずぶち当たるので、思考実験として予行練習にいかがですかｗ ちょっと前に書いた[HTML]素朴な疑問：空白の行は内容か装飾か ― 文章とHTMLもそういう感じのヤツなので、こういう考察が好きな人は是非どうぞ。

figure要素には何を入れられるのか

figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。

発端：リストにタイトルをつけたい

このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。

別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。

だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。

figure要素の説明を読んだ

HTML5.JPを読みに行きましょう。すると

figure 要素は、いくらかのフロー・コンテンツを表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。

そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。

figure 要素

とあるわけです。

なんだ、前まではこのfigureってimgにキャプションをつけるためのものって認識だったんですけど、変わったのかな…人に聞いても、みんな挿絵に使う要素だと思ってたみたい。

要はfigureは何にでもキャプションとか注釈をつけられるって事。フロー・コンテンツって、殆ど全部だし。ドキュメントのフローに～というあたりをすごく難しく考えていたんですが、単にキャプションをつけたい！と思ったらこれで囲ってfigcaption使えよ、という解釈でどうやら良さそうです。挿絵と言うより挿しコンテンツって感じですね australian online casino。

実際の使用例を探した

HTML5.JPに書かれてあるような使用例が実際にあるのか、HTML5で書かれたサイトをチェックしてみましょう。

HTML5.JPを見る

まずは御大HTML5.JP。まあここを見れば間違った使い方はしてないでしょ。

と思いきや、figureが全然ない…ｗ まあ、キャプションをつける必要のあるコンテンツがなければ使う必要がないわけですｗ

hamashun.meを見る

次はHTML5のことを調べていると必ず行きあたる、しかも分かりやすい説明をしてくれる@hamashunさんのブログ。ここでfigureを発見しました。

hamashun.me : id名やclass名はcamelCaseが好きだなー。個人的には好きだなー。

これは紛れもなくfigureです。ちょっと分かりにくいですけど、下のテキストがキャプションですね。

figureを使う場合の具体例

では実際に使われそうなシチュエーションごとに考えてみましょう。

ブログ個別記事の目次(見出しリスト)

目次に「目次」というキャプションをつけたい場合。もちろん単純にその文章の章の一つとして目次を置く場合もあるんですけど、WEBCRE8.jpは目次を単なるナビゲーションとして扱っているので、これはキャプションつきリストとして扱いたいわけです。figureの中にulを入れるなり、リンクをまとめた段落なりdivを入れればいいですね。

見出し1
見出し2
見出し3

挿絵

挿絵と書いているので文書の中でこの画像がどういう意味を持つのか…とかかなり深く考えてましたが、要は画像にキャプションをつけたければ使ってOKです。

これは「挿絵は全てfigureで囲むべきなのか」というと…そうではなく、単純にキャプションをつけたいときにこのタグで囲むわけです。

サンプルコードやチュートリアル画像その他

説明の中に「これらは、ドキュメントのメインのコンテンツから参照されます～」とある通り、メインのコンテンツの流れの中にあるコードや表は単に見出しで明示された後に配置すればそれで伝わるので、わざわざキャプションをつけ独立させなくてもいいです。

料理の手順やチュートリアルなども同様です。写真の横につく文章は注釈ではなく本文ですよね。

また、これは本文の中に直接出てくる画像やコードはその説明も本文の中で出てくることが多いのでキャプションをつける必要性が薄く、結果的に使う必要がないと言う事でもあります。

表

tableには元々caption要素があるのでそれでOKですね。表を定義リストでマークアップしている場合、画像で作った図表等はfigureで囲めばキャプションがつけられます。

箇条書き

目次の項と同じと言えば同じですが、例えば「家訓」や「○○の十ヶ条」等の箇条書きを文章の流れに含まずに表示したい場合、figureでマークアップするパターンが考えられます。

ＣＧを使いません
ワイヤーを使いません
スタントマンを使いません
早回しを使いません
最強の格闘技ムエタイを使います

『『マッハ！弐』予告編』 特別映像＠ぴあ映画生活

figureを使うかどうか、判断のポイント

ドナルド - アンサイクロペディア

挿絵だからわざわざキャプションをつけてfigureでマークアップする必要がある？

まったくないですし、してもいいです。そのコンテンツにキャプションが必要ならfigureでマークアップすればいいし、挿絵はfigureでマークアップすべきだからキャプションつけなきゃ！なんてこともありません。

デザインやレイアウトを合わせたいからキャプションなしのコンテンツもfigureに入れたい

それでもいいですけど、単にレイアウトを合わせたいだけならfigureをdivで囲んでもいいと思います。

フローって事は単なる段落も入れられるの？

それが「本文から参照され」「独立したコンテンツとして成立する」なら入れることが出来ます。もちろん「いくつかの」なので見出しと段落のセットも入れられます。

具体的には詩などですかね。

aside要素との違い

asideとfigureは、同様にそのセクションから独立した要素です。この二つにはどういう違いがあるのでしょう。

articleやsection内に置かれたそのセクションとの関係性はそれぞれ、

• figureの場合はそのセクションから参照される
• asideの場合はそのセクションの内容と無関係でよい

という違いがあります。

例えばソーシャルアイコンのセット、広告等は記事と直接の関係はないのでasideでマークアップできますが、これを関連商品等、この記事から参照されるコンテンツと考えればfigureでもマークアップ出来る気がします。

でも「キャプションつけるからfigure」とか「つけないからfigureじゃない」とか変じゃない？自己完結してるからfigureなんじゃないの？

この記述はおそらく文書作成者が「そもそもこのコンテンツにキャプションをつけるべきかどうか」という点で迷っている場合の、マークアップと言うより文章構成についてのガイドだと考えます。

つまり、本文から参照されるべき自己完結したコンテンツであるなら本来キャプションをつけるべき(だからfigureでマークアップする)だと言う事を言っているのだと思います。

論理的に文書作成者がキャプションをつけなくてもいいと思った場合、それは本文に含まれるコンテンツであるか、そうでなくともキャプションが不要なようにコンテンツ内で十分な言及がなされているはずだ(なのでそもそもfigureでマークアップする必要がない)と言う事です。

ちなみにWEBCRE8.jpでは最初に画像なしで記事を全て書ききってから補強のために画像をつけている為、殆どの画像にキャプションをつけています。全てfigureでマークアップするべきですね(…＞＜)。

マークアップの正解はコンテキスト次第

ここまで書いてきましたが念のために言うと、この文はなにも「おい！これはfigureでマークアップするべきなのになんで普通にp要素なんだ！」とか言ってるわけじゃありません。WEBCRE8.jpもまだキャプションをdivでマークアップしてますしｗ(これは単に実装遅れの問題ですが…)

元々文章って、言いたいこと、つまり内容がありますよね。そしてそれを文章、つまり言葉にすることで読む人にそれを伝えます。で、今度はそれをコンピュータに伝える為に、またはただの文章をコンテキストも含んだより正確な伝え方をするためにマークアップ、つまりHTMLがあるわけです。とwebcre8は理解してます。

HTMLは文書としてはbodyにp入れてテキスト突っ込めば読めるわけで、そのただの文に「ここは特に伝えたいとこだよ！テストに出ます！」「ここは僕が言ったんじゃないよ！勘違いしないでね！」「この絵はわかんないかもと思って一応つけただけだよ！なくても読めるからね！」と言った筆者の意図を含めたいからわざわざ専用のタグでマークアップするんですね。

仮に話者にとって本当に全部が重要なら全部strongで囲んだっていいわけで(全部重要！なんて言われたら結果的に聞き手にとっては重みづけがなくなり、全て重要ではなくなってしまうのも会話と同じですね)。極端な例ですけどｗ

制作者にとって何が重要か

文章にとって一番必要なのは大抵見出しと段落でしょう。それすら明確でない場合もありますけど。それ以外の必要性はかなり人によります。

「ぶっちゃけそれ以外のマークアップはセクションとか強調とかめんどくさい」と、そう思っている人が「この記事を書いた日付だけは大事にしたい！」と思っていれば公開日付は必ずtimeでマークアップするわけです。

「引用だろうがなんだろうが俺のブログだからいいだろ」と言う人は引用をqでもblockquoteでも囲まないでしょうし。

そしてほとんどの場合、それが妥当なものだと思わなければそのマークアップを採用する必要もありません。

実際はそれを真剣に取捨選択したと言うより、知らないか面倒といった理由で検討する段階をすっ飛ばしている人も多いと思います。WYSIWYGエディタや各CMSは如何にここをクリアするかが求められていると言えるでしょう。

逆に「これもこのタグでマークアップ出来るんじゃない？」と拡大解釈気味になるべく固有の要素でマークアップしたがるパターンもあります。定義上間違っていないのなら意味付けは積極的に行った方がいいとは思いますし、この辺は作成者の「文章をしっかりマークアップしたい」と言うモチベーションによるのかなと思います。

まとめ

• figure要素は挿絵だけじゃなくコードや表、色んな挿しコンテンツに使える
• 別に無理につけなくてもいい。キャプションつけない人は気にしなくていいよ
• マークアップは書く人間のコンテキスト次第。セマンティックなマークアップを目指すならそれが文書に取ってどんな意味を持つのか考えてみよう

あと調べている過程でしらぎくさんのfigureに関する考察を見つけました。ぶっちゃけこれでもいいよかったような…ｗ

HTML 5での>figure<要素の使い方と疑問点(平成22年 4月19日) - 『しらぎくのWWW作成入門』メモ

最近このパターン多いなー＞＜

協力

今回はソーシャルで仲良くさせてもらっているマークアップエンジニアの@sophide0822さんと、フリーランスのwebクリエイタ@sou_labさん他に話相手になってもらいました★この「比べる」カテゴリではこのように、webcre8の見地のみではなく、議題について詳しい人にも議論に加わってもらい、今後もこのように何が正しいのかを多角的に探っていきたいと考えています。