【HTML】アウトラインとは【HTML文書の階層構造を意味します】

Program

HTML5では、階層構造を意識してHTML文書を記述していきましょう。

「アウトライン」とは

以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アウトラインとは</title>
</head>
<body>
    <h1>サラリーマン出張日記ブログ</h1>
    <section>
        <h2>記事の一覧</h2>
        <section>
            <h3>出張1日目</h3>
            <p>新幹線で移動&取引先で会議</p>
        </section>
        <section>
            <h3>出張2日目</h3>
            <p>工場視察&飛行機で帰路</p>
        </section>
    </section>
</body>
</html>

プログラムを見てみると、body要素の中では、h1要素が最上位の階層となっています。

そして、section要素によってアウトラインが生成されて、h2要素が最上位の階層から1つ下の階層とされています。

さらに、h3要素とp要素とのブロックが2つあり、この2つのブロックも、section要素によってアウトラインが生成されて、最下位の階層となっています。

つまり、HTML5では、階層構造を意識しつつ、HTML文書を記述していくことになります。

ここに示すHTMLの記述では、section要素を使ってアウトラインを生成しています。このように、アウトラインを生成させるために使われる要素を「セクショニング要素」と呼びます。

「セクショニング要素」は、section要素の他に、article要素、nav要素、aside要素があります。

「暗黙のアウトライン」とは

次に、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アウトラインとは</title>
</head>
<body>
    <h1>サラリーマン出張日記ブログ</h1>
        <h2>記事の一覧</h2>
            <h3>出張1日目</h3>
            <p>新幹線で移動&取引先で会議</p>
            <h3>出張2日目</h3>
            <p>工場視察&飛行機で帰路</p>
</body>
</html>

先ほどのプログラムから、section要素に関する記述を削除しました。

HTML5では、アウトライン(階層構造)を意識した記述を行うため、「セクショニング要素」を使った記述を先に説明しました。

実は、「見出し」を表示するh1〜h6要素を使うことにより、HTMLの記述に階層構造を持たせることもできます。

そして、h1〜h6要素の記述により生成させる階層構造を「暗黙的なアウトライン」と呼びます。

これに対して、先に述べたsection要素などの「セクショニング要素」の記述により生成される階層構造を「明示的なアウトライン」と呼びます。

サンプルとして示したHTML文書では、先に示したHTML文書と同様に、h1要素が最上位の階層となり、h2要素が最上位の階層から1つ下の階層となり、h3要素とp要素との2つのブロックが最下位の階層として、生成されています。

「セクショニング・ルート」とは

次に、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アウトラインとは</title>
</head>
<body>
    <h1>サラリーマン出張日記ブログ</h1>
    <section>
        <h2>記事の一覧</h2>
        <section>
            <h3>出張1日目</h3>
            <p>新幹線で移動&取引先で会議</p>
        </section>
        <blockquote>
            <h1>新幹線の乗車料金</h1>
            <p>片道¥16,000/1人</p>
        </blockquote>
        <section>
            <h3>出張2日目</h3>
            <p>工場視察&飛行機で帰路</p>
        </section>
    </section>
</body>
</html>

初めの(一番最初の)プログラムに、blockquote要素を追加しました。

具体的には、h3要素とp要素との2つのブロックを最下位の階層として生成した2つのsection要素の間に記述しました。

blockquote要素は、引用を示します。そして、HTML文書の全体のアウトラインから独立した独自のアウトラインを生成することができます。

このため、blockquote要素によるブロックの中では、「見出し」としてh1要素が記述されています。

このように、HTML文書の途中に、独自のアウトラインを生成することが可能な要素を「セクショニング・ルート要素」と呼びます。

「セクショニング・ルート要素」は、blockquote要素の他に、body要素、details要素、fieldset要素、figure要素、td要素があります。

以上の通り、HTML5では、HTML文書の全体のアウトライン(階層構造)を意識して記述を行うと共に、「セクショニング・ルート要素」も使いながら、引用情報や追加の詳細情報を各階層の各々の位置で、個別に記述することができます。

以上、HTML5の階層構造の記述について、ご参考になさってください。

タイトルとURLをコピーしました