セクション[01]-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
アウトラインアルゴリズムによりセクションの決定
HTML仕様にはアウトラインアルゴリズムを定義しています。マークアップからセクション構造を定義する方法は2通りあり、見出しにより暗黙のセクション・セクショニングコンテンツにより明示的なセクションがあります
【暗黙のセクション】
HTMLには見出し要素が6種類（h1〜h6）用意されてあり、セクションのランクを表現できます。ある見出しが出現してから、次の同じランクもしくはその見出しより高いランクの見出しが出現するまで、１つのセクションとして扱います。
このように、自動的に生成されるセクションのことを暗黙のセクション（implied section）と言います。見出しを適切に使用するだけで自動的にセクションを表現できます。
【暗黙のセクションの注意点】
自動的にセクションを表現できますが、うまく表現できないケースもあります。下記のケースの場合、<div>要素はアウトラインに影響しない為、テキストの続きは注釈の一部として扱われます。
<h1>見出し1</h1>
<p>最初のテキスト</p>
<div class="note">
<h2>注釈</h2>
<p>注意書き</p>
</div>
<p>テキストの続き</p>
</div>
本当は１つのセクションにまとめて欲しいと思います。
【セクショニングコンテンツによる明示的なセクション】
現在のHTML仕様では、セクションの範囲を明示するための要素が用意されています。先程の例を下記のようにdiv要素をsection要素に変更すると、注釈文も１つのセクションとしてまとめる事ができます。このような表現を明示的なセクションといいます。
<h1>見出し1</h1>
<p>最初のテキスト</p>
<section class="note">
<h2>注釈</h2>
<p>注意書き</p>
</section>
<p>テキストの続き</p>
</div>
セクションを明示する要素にはarticle、section、aside、navの４つがあります。これらはセクショニングコンテンツ（sectioning content）といいます。
【セクショニングルート】
見出しやセクショニングコンテンツが、単純にアウトラインに組み込まれると困る場合があります。その典型的な例が引用です。下記の例で見ていきます。
<section>
<h1>タイトル</h1>
<section>
<h2>最初に</h2>
<p>最初の本文</p>
</section>
<section>
<h2>次に</h2>
<p>次にの本文</p>
<blockquote>
<h1>引用</h1>
<p>引用の本文</p>
</blockquote>
</section>
</section>
引用にh1要素があります。本来ならh1があれば暗黙のセクションでセクションと解釈されますが、blockquote要素はそうとなりません。
HTML仕様ではblockquote要素の内側と外側で、それぞれ独立したアウトアインを持つことになっています。よって引用のh1は外側のアウトライン含まれません。
このように内側のセクションと見出しが祖先のアウトラインに影響しないものをセクショニングルート（sectioning root）と呼びます。
