Sep. 29th,2020
“アウトライン”とは？
文書のアウトライン
通常長大な文章は章や節、項といった見出しを付けることによって階層構造になっていますが、この文章の階層構造のことを“アウトライン(Outline)”と呼びます。
HTML文書では見出しを表す“h1”~“h6”要素によってアウトラインが生成されます。
アウトラインはすべての見出しを順番に並べることによって表され、見出しのランクによって階層構造となります。
見出しのランクは“h1”~“h6”要素の要素名の数字によって示され、“1”が最上位のランクで数字が大きくなるにつれて下位のランクとなります。複数の見出しを持つ文書では少なくとも1個の見出しがランク“1”の見出しであるべきです。
アウトラインは音声ブラウザが文書のコンテンツの構造を読み取るのに使用されるほか、検索エンジンなどによって使用される場合もあります。
過去のアウトラインの定義
セクショニング要素とアウトライン
過去の仕様ではHTML5で新たに追加されたセクショニング要素を使用してアウトラインを生成することができることが定義されていました。セクショニング要素は以下の4つの要素です。
セクショニング要素はセクションを作ることで見出し要素やフッターが対象とする範囲を限定するとされ、このことは“セクショニング”と定義されていました。
現行の仕様でもセクショニング要素は“header”要素と“footer”要素が対象とする範囲を限定するために使用できると定義されていますが、“セクショニング”の概念は廃止されています。
明示的なアウトライン
見出し要素によって暗黙的に生成されるアウトラインに対して、セクショニングによって明確化されたアウトラインは一般に“明示的なアウトライン”と呼ばれました。
明示的なアウトラインはセクショニング要素を入れ子にしていくことによって生成されます。セクショニング要素の中に別のセクショニング要素を入れると中に入れられたセクショニング要素はその内容となるコンテンツが外側のセクショニング要素の下位の階層となることを表します。
“article”要素は自己完結した記事セクション、“nav”要素はナビゲーション、“aside”要素は本筋とは別れた補足するセクションとそれぞれ作り出すセクションに特別な意味合いを持たせます。セクションに特別な意味合いがない場合は“section”要素を使用します。
通常セクショニング要素は見出し要素を含み、コンテンツを見出し要素とともにセクショニング要素で囲むことでその見出し要素がどのコンテンツを対象としているのかを明確に示すことができます。
<section>
<h2>バナナの特徴</h2>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
</section>
なお、暗黙的なアウトラインと明示的なアウトラインを混在させると意図しない形でアウトラインが生成される場合があるため、どちらかに統一することが推奨されます。
セクショニング・ルート
文書のアウトラインに影響する要素にはセクショニング要素以外にも“セクショニング・ルート(Sectioning root)”が定義されていました。
セクショニング・ルート要素は全体のアウトラインから独立した独自のアウトラインをその中に生成します。
