このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

文書のアウトラインとセクショニング

記事Sep. 29th,2020
文書の階層構造を表すアウトラインとアウトラインを生成するセクショニングについて。

HTML文書の基本

“アウトライン”とは?

通常長大な文章は章や節、項といった見出しを付けることによって階層構造になっていますが、この文章の階層構造のことを“アウトライン(Outline)”と呼びます。

アウトラインの例

HTML文書もh1”~“h6”要素によってアウトラインが生成され、コンテンツが階層構造となります。

暗黙的なアウトライン

HTML文書の見出しを適切にh1”~“h6”要素でマークアップすることでアウトラインが生成されます。見出し要素によって生成されるアウトラインを一般に“暗黙的なアウトライン”と呼びます。

暗黙的なアウトラインでは見出し要素から次の見出し要素までが同じ階層のコンテンツとみなされます。次に現れる見出し要素が前の見出し要素よりもランクが低ければ下位の階層を作り出します。

暗黙的なアウトライン

明示的なアウトライン

セクショニング要素

HTML5ではアウトラインを生成するためのセクショニング要素が追加されました。セクショニング要素は以下の4つの要素です。

セクショニング要素はセクションを作ります。セクションは見出し要素フッターが対象とする範囲を限定し、このことを“セクショニング”と呼びます。

article”要素は自己完結した記事セクション、nav”要素はナビゲーション、aside”要素は本筋とは別れた補足するセクションとそれぞれ作り出すセクションに特別な意味合いを持たせます。セクションに特別な意味合いがない場合はsection”要素を使用します。

<section>
<h2>バナナの特徴</h2>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
</section>

セクショニング要素は他のセクショニング要素の中に配置して入れ子にすることができます。

明示的なアウトライン

見出し要素だけでもアウトラインが生成されましたが、セクショニングによってより明確にアウトラインを生成することができます。

セクショニングによって明確化されたアウトラインを一般に“明示的なアウトライン”と呼びます。

明示的なアウトラインはセクショニング要素を入れ子にしていくことによって生成されます。セクショニング要素の中に別のセクショニング要素を入れると中に入れられたセクショニング要素はその内容となるコンテンツが外側のセクショニング要素の下位の階層となることを表します。

section”要素による明示的なアウトライン

また、前述のようにコンテンツを見出し要素とともにセクショニング要素で囲むことでその見出し要素がどのコンテンツを対象としているのかを明確に示すことができます。

例えば、以下の例では暗黙的なアウトラインではh3”要素の後に続くコンテンツはh2”要素もしくはh1”要素が現れるまですべてh3”要素が対応するコンテンツということになります。

section”要素がない場合のアウトライン

しかし、section”要素を使用するとh3”要素が対応するコンテンツを途中までに限定することもできます。セクションが区切られた後のコンテンツに対応する見出しはh3”要素より1つ上の階層のh2”要素ということになります。

section”要素がある場合のアウトライン

なお、暗黙的なアウトラインと明示的なアウトラインを混在させると意図しない形でアウトラインが生成される場合があるため、どちらかに統一することが推奨されます。

セクショニング・ルート

文書のアウトラインに影響する要素にはセクショニング要素以外に“セクショニング・ルート(Sectioning root)”となる要素があります。

セクショニング・ルート要素は全体のアウトラインから独立した独自のアウトラインをその中に生成します。

文書のアウトラインとセクショニング・ルート
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク