HTML5カルタ大会にて思ったこと。

分からないものを分からないままにするの、良くなーい！！

ってことで、少しあやふやなところもあったHTML5のタグを、改めて見直してみたいなーと思いました。

まず、重要そうなアウトラインに関連するところだけ、さらっと見直してみます。

アウトラインとは？

いわゆる概要のことです。そのアウトラインだけ見れば、その文章が何を言っているのかが一目瞭然で分かるようになっていなければなりません。

HTML5では、アウトラインの定義が厳格になっています。HTML4と比べてどうなったのかをまず見てみたいと思います。

<h1>girigiribauerとは？</h1>
<p>いつもぎりぎり、girigiribauerですこんにちは。</p>
<div>
  <h2>フロントエンドテロ対策とは？</h2>
  <p>フロントエンドで起きるテロを食い止めるお仕事のこと</p>
</div>
<h3>どうやって食い止めるの？</h3>
<p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>

上記HTMLのアウトラインは、HTML4ではこんな感じになります。（文章的に適切かどうかは置いておきます）

1. girigiribauerとは？
  1. フロントエンドテロ対策とは？
    1. どうやって食い止めるの？

見出しの h1 から h6 までを順に見ていくことで、だいたいこの文章に何が書いてあるかが分かるようになってますね。

これに対して、HTML5では見出しタグ以外のタグがアウトラインに影響を及ぼすと定義されてます。

<h1>girigiribauerとは？</h1>
<p>いつもぎりぎり、girigiribauerですこんにちは。</p>
<section>
  <h2>フロントエンドテロ対策とは？</h2>
  <p>フロントエンドで起きるテロを食い止めるお仕事のこと</p>
</section>
<h3>どうやって食い止めるの？</h3>
<p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>

div を section に変更してみました。同様にこれをアウトライン化してみると、以下のようになります。

1. girigiribauerとは？
  1. フロントエンドテロ対策とは？
  2. どうやって食い止めるの？

段差具合が変わりました。sectionタグに変わることで、文章の意味が変わっています。

逆にHTML4までは、どんだけ意味的に深い階層だからといって div を重ねたとしても、意味的に深い階層であるということを表す術がなかったということにもなります。 文章をより正しい意図で解釈させるためにも、このアウトラインは意識する必要があるのではないかなーと思っています。

ちなみにこのアウトラインは、解析のアルゴリズムが仕様としても公開されていますし、HTML5 Outlinerでも簡単に確認することができます。

セクション、見出し

セクショニングコンテンツ（Sectioning content）と、見出しコンテンツ（Heading content）について触れてみます。それぞれのタグの意味というよりは、アウトラインに影響を及ぼすかどうかという観点で見ていこうと思います。

アウトラインに影響を及ぼすタグ、セクショニングコンテンツは以下の4つしかありません。

• article
• aside
• nav
• section

つまり、これが入っているかどうかでアウトラインが変化するということになります。

また、元々アウトラインに影響するタグとして、h1〜h6の見出しタグが存在しています。それと新たに追加された hgroup を含めたものが見出しコンテンツとなります。

• h1
• h2
• h3
• h4
• h5
• h6
• hgroup

それでは試しに書いてみます。

[html]  

</body>

そして、このHTMLをアウトライン表示してみます。

1. Untitled Section
  1. girigiribauerとは？
    1. フロントエンドテロ対策とは？

これはよくありがちな間違いだと思います。bodyタグの直下でsectionタグを用いて全体を括ってから、h1タグを入れていますが、body自身はセクションの一番親（セクショニングルート）として扱われるため、一番外側のsectionタグは不要になりますね。

実際にアウトライン表示して見てみると、一番上のアウトラインのところは対応する見出しがないため、Untitled Sectionと表示されてしまっています。『タイトルのないセクションだぜー』と言われちゃってますね。

セクショニングルートの要素（Sectioning root）

bodyタグがセクションの一番親になる、セクショニングルートの要素であるということでしたが、実はbodyタグ以外にもセクショニングルートの要素が存在しています。

body以外のこれらは、bodyの中のどこかに入ってくることになりますので、アウトラインの中に別のアウトラインが出来るということになりますね。

• body
• blockquote
• details
• dialog
• fieldset
• figure
• td

それぞれのタグの説明にはあまり踏み込みませんが、一番分かりやすいのはblockquoteタグかもしれません。 これは引用文を記述するためのタグになりますので、引用元独自のアウトラインがあってもいいはずです。

hgroupってなに？

上でちょっとスルーしてましたが、h1からh6に加えて新たにhgroupタグが追加されています。

これのあるなしで、どうアウトラインが変わるのかを見ていきます。

<h1>girigiribauerとは？</h1>
<p>いつもぎりぎり、girigiribauerですこんにちは。</p>
<section>
  <h2>フロントエンドテロ対策とは？</h2>
  <p>フロントエンドで起きるテロを食い止めるお仕事のこと</p>
</section>
<h3>どうやって食い止めるの？</h3>
<h4>テロの食い止め方など</h4>
<p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>

まずこれ。先ほどのサンプルに加えて、h3の下にh4を入れました。

1. girigiribauerとは？
  1. フロントエンドテロ対策とは？
  2. どうやって食い止めるの？
    1. テロの食い止め方など

そうすると、sectionで囲っていないものの、h4が一段下に下がり、暗黙的にセクションが出来たことが分かります。

つまり、元々h3のセクションに含まれていた 詳しくは〜〜 のpタグは、h4のセクションに含まれることになります。

でも本当は（サンプルの文章が正しいかは置いておいて）、h3 と h4 の両方が、その下に係るpタグを含んだセクションとしたいわけなので、意味的には間違ってきてしまいました。

<h1>girigiribauerとは？</h1>
<p>いつもぎりぎり、girigiribauerですこんにちは。</p>
<section>
  <h2>フロントエンドテロ対策とは？</h2>
  <p>フロントエンドで起きるテロを食い止めるお仕事のこと</p>
</section>
<hgroup>
  <h3>Aどうやって食い止めるの？</h3>
  <h4>Bテロの食い止め方など</h4>
</hgroup>
<p>詳しくはジャックバウアーの名言AdventCalendarでも見てください</p>

それに対して h3 と h4 を hgroup で囲ったものはどうなるでしょうか？

1. girigiribauerとは？
  1. フロントエンドテロ対策とは？
  2. どうやって食い止めるの？

おっと、h4 に相当するセクションが消えました。ご覧の通り、h3 と h4 がグループ扱いとなり、 h4 だけの暗黙的なセクションが生成されなくなりましたね。

上記の h3 と h4 の例の通り、hgroupは、セクションを分けるほどでもないけど、補足的な見出しに相当するものをグルーピングする役割を持っています。

まとめ

HTML5でのアウトラインは、HTML4に比べて厳密に定義されているため、HTML4よりも文書構造がより意味的に解釈しやすくなったと言えます。

h1〜h6だけでは表現しきれなかった文書のツリー構造も、HTML5で適切にセクショニングコンテンツを用いてアウトラインを定義することで、よりその文書の意味に沿ったアウトラインが定義できますね。

HTML5のカルタ大会のときは、**『tdってセクショニングルートだったっけ？』**とか、ちょっとあやふやなところがあったので、見直してみてすっきりです。

HTML5の仕様も2012/12/17に勧告候補になりましたので、今後安定化への動きが加速していくことと思います。先行して勉強していた人も、広まってからでいいやーって思っていた人も、ひょっとしたら今が勉強を見直す or 始めるチャンスかもしれません。

参考URL

• W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ
• HTML5の仕様（英語）
• tdがなぜセクショニングルートなのか、に関するhtml5j.org上でのやりとり