アウトライン・アルゴリズム

　HTML5では、セクショニング・コンテンツに属する要素を使って、明示的にセクションをマークアップしなければいけないというわけではありません。旧来の通り、h1～h6要素だけを使って、暗黙的にセクションを表すこともできます。そのため、HTML5では、どのようにしてコンテンツの階層を判別するのかが定義されています。

　このコンテンツの階層構造のことをアウトラインと言います。そして、アウトラインを判別するための方法を、アウトライン・アルゴリズムと言います。

　HTML5でマークアップする際には、このアウトライン・アルゴリズムを意識しなければいけません。ここでは、アウトライン・アルゴリズムを簡単に説明します。

アウトラインの意味

　まず、アウトラインというものを理解しましょう。書籍の目次をイメージしてください。本のタイトルをトップに、その下に章があります。さらに、その下には節があります。基本的にはウェブ・ページも同じはずです。

旧来のマークアップ


<h1>HTML5</h1>
<p>HTML5 とは...</p>
<h2>要素</h2>
<p>要素とは...</p>
<h3>section 要素</h3>
<p>section 要素とは...</p>
<h3>article 要素</h3>
<p>article 要素とは...</p>
<h2>DOM</h2>
<p>DOM とは...</p>

　この見出しだけを取り出して、階層も考慮し、見出し番号を付けるとすれば、このページの目次は次のようになるでしょう。

アウトライン


１．HTML5
	１．１．要素
		１．１．１．section 要素
		１．１．２．article 要素
	１．２．DOM

　これが、このドキュメントのアウトラインを表したものとなります。

見出し要素だけでアウトラインを判別する方法

　では、先ほどのマークアップから、どのようにしてアウトラインを判別したのかを詳しく見ていきましょう。以降、h1～h6要素の事を見出し要素と呼びます。

旧来のマークアップ


<h1>HTML5</h1>
<p>HTML5 とは...</p>
<h2>要素</h2>
<p>要素とは...</p>
<h3>section 要素</h3>
<p>section 要素とは...</p>
<h3>article 要素</h3>
<p>article 要素とは...</p>
<h2>DOM</h2>
<p>DOM とは...</p>

　アウトライン・アルゴリズムでは、section要素や article要素といったセクショニング・コンテンツに属する要素がなければ、見出し要素が現れた時点で、新たなセクションが始まると見なします。これを踏まえて、マークアップを見ていきましょう。

　まず、上から順にマークアップを読んでいきます。最初に現れた見出し要素がトップレベルの見出しとなります。サンプルでは、<h1>HTML5</h1> が該当します。

　次に現れる見出し要素を調べます。それは <h2>要素</h2> になります。この時点で、新たにセクションが始まると解釈します。しかし、この前に現れた見出し要素 <h1> より <h2> の方がレベルが低いため、アウトライン・レベルが1つ下がります。これで、現時点のアウトラインは、次のようになります。

現時点のアウトライン①


１．HTML5（h1）
	１．１．要素（h2）

　次に現れる見出しは <h3>section 要素</h3> です。これも、この前に現れた見出し要素 <h2> よりレベルが低いため、アウトライン・レベルが、さらに 1つ下がります。これで現時点のアウトラインは、次のようになります。

現時点のアウトライン②


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）

　次に現れる見出しは <h3>article 要素</h3> です。これは、この前に現れた見出し要素 <h3> と同じレベルです。この場合は、同じレベルのセクションが新たに始まったと解釈します。これで現時点のアウトラインは次のようになります。

現時点のアウトライン③


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．article 要素（h3）

　次に現れる見出しは <h2>DOM</h2> です。これは、この前に現れた見出し要素 <h3> よりレベルが高いため、アウトライン・レベルが 1つ上がります。これで現時点のアウトラインは、次のようになります。

現時点のアウトライン④


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．article 要素（h3）
	１．２．DOM（h2）

　以上のように、アウトライン・アルゴリズムでは、h1～h6要素の数字の大きさを基準に、アウトライン・レベルを上げたり下げたりします。

　ただし、判断基準は、h1～h6要素が表す数字が、以前のセクションの見出しより、大きいか、小さいか、同じか、だけです。例えば、h4 の次が h2 になったからと言って、アウトライン・レベルが 2段階上がるわけではありません。h4 から h2 に飛び番で遷移したとしても、アウトライン・レベルは 1つずつしか変わらない点に注意してください。

セクション要素を使ったアウトラインの判別方法

　では、HTML5で新たに導入されたセクショニング・コンテンツに属する要素を使ってマークアップした場合のアウトラインの判別方法を見ていきましょう。ここでは、セクショニング・コンテンツに属する要素をセクション要素と呼びます。

セクションのマークアップ例


<h1>HTML5</h1>
<p>HTML5 とは...</p>
<section>
	<h2>要素</h2>
	<p>要素とは...</p>
	<section>
		<h3>section 要素</h3>
		<p>section 要素とは...</p>
	</section>
	<section>
		<h3>article 要素</h3>
		<p>article 要素とは...</p>
	</section>
</section>
<section>
	<h2>DOM</h2>
	<p>DOM とは...</p>
</section>

　アウトライン・アルゴリズムでは、セクション要素が現れると、その 1つ上のセクションからアウトライン・レベルが 1つ下がると解釈します。この時点で新たなセクションが開始されたと解釈し、その要素の中で最初に現れる見出し要素が、そのセクションの見出しとして解釈されます。では、上から順に見ていきましょう。

　まず最初に <h1>HTML5</h1> が現れますので、これがトップレベルの見出しとなります。次に、section要素の開始タグが現れます。そのため、ここで、アウトライン・レベルが 1つ下がった新たなセクションが出来たと解釈します。この時点でアウトラインは、次のようになります。

現時点のアウトライン①


１．HTML5（h1）
	１．１．不明

　次に <h2>要素</h2> が現れます。これは、現時点のセクションで最初の見出し要素ですので、これが、現時点のセクションの見出しと解釈され、アウトラインは次のようになります。

現時点のアウトライン②


１．HTML5（h1）
	１．１．要素（h2）

　さらにマークアップを進めていくと、また section要素の開始タグが現れます。そのため、さらに、1つレベルが下がったセクションが開始されたと解釈し、アウトラインは次のようになります。

現時点のアウトライン③


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．不明

　このセクションを読み進めていくと、<h3>section 要素</h3> が現れます。これは、現時点のセクションで最初の見出し要素ですので、これが、現時点の見出しと解釈され、アウトラインは次のようになります。

現時点のアウトライン④


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）

　次に、</section> が現れます。この時点で「１．１．１．section 要素」のセクションが終了したと見なされます。

　その次に、<section> が現れます。すでに先ほどのセクションは終了しているため、ここでは、先ほどのセクションと同レベルのセクションが開始されたと解釈し、アウトラインは次のようになります。

現時点のアウトライン⑤


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．不明

　次に、<h3>article 要素</h3> が現れますので、このセクションの見出しと解釈し、アウトラインは次のようになります。

現時点のアウトライン⑥


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．article 要素（h3）

　次に、</section> が現れます。この時点で「１．１．２．article 要素」のセクションが終了したと見なされます。

　さらに、また </section> が現れます。この時点で、1つ上の階層のセクション、つまり、「１．１．要素」のセクションが終了したと見なされます。

　次に section要素の開始タグが現れます。すでに、「１．１．要素」のセクションは終了していますので、この section要素の開始タグは「１．１．要素」と同じレベルのセクションを生成する事になり、アウトラインは次のようになります。

現時点のアウトライン⑦


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．article 要素（h3）
	１．２．不明

　この新たなセクションの中では <h2>DOM</h2> が現れますので、これが、現在のセクションの見出しと見なされ、アウトラインは次のようになります。

現時点のアウトライン⑧


１．HTML5（h1）
	１．１．要素（h2）
		１．１．１．section 要素（h3）
		１．１．２．article 要素（h3）
	１．２．DOM（h2）

セクショニング・ルートの扱い

　blockquote, body, details, fieldset, figure, td といった要素はセクショニング・ルートというカテゴリーに属した要素です。これらの要素は、アウトライン・アルゴリズムでは、独立したコンテンツとして見なされます。

　したがって、body要素の中に、例えば blockquote要素が現れた場合、たとえ、その引用コンテンツの中にセクションが存在していたとしても、body要素のコンテンツのアウトラインには現れません。

セクショニング・ルートを含んだマークアップ例


<body>
	<h1>引用の例</h1>
	<p>次のように blockquote要素で引用をマークアップした場合、このドキュメントのアウトラインには現れない事になります。</p>
	<blockquote>
		<h2>引用の見出し</h2>
		<p>この引用コンテンツは body要素のコンテンツのアウトラインには出現しません。独立したコンテンツとして解釈されます。</p>
	</blockquote>
</body>

アウトラインを確認する方法

　HTML5でマークアップする際、アウトラインがどうなっているのかを意識する必要がありますが、どうやってそれを確認するのでしょう。

　HTML5で規定されたアウトライン・アルゴリズムは、プログラムから判定しやすいロジックで説明さていますので、アウトラインをチェックするツールを作る事が可能となっています。正確に言うと、そうできるように、アウトライン・アルゴリズムが考えられていると言っても良いでしょう。

　現在、すでに、アウトラインをチェックするツールが存在しますので、それを紹介します。