うあーろぐTOPHTML5のタグを見直してみる(骨格編)2013/01/14この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性がありますTechHTML5HTML5-outlineHTML5カルタ大会にて思ったこと。分からないものを分からないままにするの、良くなーい!!ってことで、少しあやふやなところもあったHTML5のタグを、改めて見直してみたいなーと思いました。重要そうなアウトラインに関連するところだけ、さらっと見直してみます。アウトラインとは?いわゆる概要のことです。そのアウトラインだけ見れば、その文章が何を言っているのかが一目瞭然で分かるようになっていなければなりません。HTML5では、アウトラインの定義が厳格になっています。HTML4と比べてどうなったのかをまず見てみたいと思います。<h1>girigiribauerとは?</h1><p>いつもぎりぎり、girigiribauerですこんにちは。<p>フロントエンドで起きるテロを食い止めるお仕事のこと</p></div><h3>どうやって食い止めるの?</h3><p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>上記HTMLのアウトラインは、HTML4ではこんな感じになります。順に見ていくことで、だいたいこの文章に何が書いてあるかが分かるようになってますね。これに対して、HTML5では見出しタグ以外のタグがアウトラインに影響を及ぼすと定義されてます。<h1>girigiribauerとは?</h1><p>いつもぎりぎり、girigiribauerですこんにちは。同様にこれをアウトライン化してみると、以下のようになります。やって食い止めるの?段差具合が変わりました。sectionタグに変わることで、文章の意味が変わっています。重ねたとしても、意味的に深い階層であるということを表す術がなかったということにもなります。文章をより正しい意図で解釈させるためにも、このアウトラインは意識する必要があるのではないかなーと思っています。Outlinerでも簡単に確認することができます。content)について触れてみます。それぞれのタグの意味というよりは、アウトラインに影響を及ぼすかどうかという観点で見ていこうと思います。アウトラインに影響を及ぼすタグ、セクショニングコンテンツは以下の4つしかありません。articleasidenavsectionつまり、これが入っているかどうかでアウトラインが変化するということになります。アウトラインに影響するタグとして、h1〜h6の見出しタグが存在しています。含めたものが見出しコンテンツとなります。h1h2h3h4h5h6hgroupそれでは試しに書いてみます。[html]girigiribauerとは?いつもぎりぎり、girigiribauerですこんにちは。フロントエンドテロ対策とは?フロントエンドで起きるテロを食い止めるお仕事のこと</body>そして、このHTMLをアウトライン表示してみます。フロントエンドテロ対策とは?これはよくありがちな間違いだと思います。bodyタグの直下でsectionタグを用いて全体を括ってから、h1タグを入れていますが、body自身はセクションの一番親(セクショニングルート)として扱われるため、一番外側のsectionタグは不要になりますね。Sectionと表示されてしまっています。『タイトルのないセクションだぜー』と言われちゃってますね。root)bodyタグがセクションの一番親になる、セクショニングルートの要素であるということでしたが、実はbodyタグ以外にもセクショニングルートの要素が存在しています。body以外のこれらは、bodyの中のどこかに入ってくることになりますので、アウトラインの中に別のアウトラインが出来るということになりますね。bodyblockquotedetailsdialogfieldsetfiguretdそれぞれのタグの説明にはあまり踏み込みませんが、一番分かりやすいのはblockquoteタグかもしれません。これは引用文を記述するためのタグになりますので、引用元独自のアウトラインがあってもいいはずです。hgroupってなに?上でちょっとスルーしてましたが、h1からh6に加えて新たにhgroupタグが追加されています。これのあるなしで、どうアウトラインが変わるのかを見ていきます。<h1>girigiribauerとは?</h1><p>いつもぎりぎり、girigiribauerですこんにちは。<p>フロントエンドで起きるテロを食い止めるお仕事のこと</p></section><h3>どうやって食い止めるの?</h3><h4>テロの食い止め方など</h4><p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>まずこれ。先ほどのサンプルに加えて、h3の下にh4を入れました。テロの食い止め方などそうすると、sectionで囲っていないものの、h4が一段下に下がり、暗黙的にセクションが出来たことが分かります。pタグは、h4のセクションに含まれることになります。両方が、その下に係るpタグを含んだセクションとしたいわけなので、意味的には間違ってきてしまいました。<h1>girigiribauerとは?</h1><p>いつもぎりぎり、girigiribauerですこんにちは。相当するセクションが消えました。暗黙的なセクションが生成されなくなりましたね。例の通り、hgroupは、セクションを分けるほどでもないけど、補足的な見出しに相当するものをグルーピングする役割を持っています。まとめHTML5でのアウトラインは、HTML4に比べて厳密に定義されているため、HTML4よりも文書構造がより意味的に解釈しやすくなったと言えます。h1〜h6だけでは表現しきれなかった文書のツリー構造も、HTML5で適切にセクショニングコンテンツを用いてアウトラインを定義することで、よりその文書の意味に沿ったアウトラインが定義できますね。HTML5のカルタ大会のときは、**『tdってセクショニングルートだったっけ?』**とか、ちょっとあやふやなところがあったので、見直してみてすっきりです。HTML5の仕様も2012/12/17に勧告候補になりましたので、今後安定化への動きが加速していくことと思います。始めるチャンスかもしれません。までご一報いただけると助かります。