w3-notes logo

cocochido

HTML/CSSリファレンス

アウトライン

解説

HTMLの「アウトライン」とはHTML文書の構造を示すためのしくみで、HTML5ではコンテンツモデルとして定義されるセクショニングコンテンツを使ってアウトラインを構成することが推奨されています。

アウトラインを正しく構成しておくことで検索エンジンやプログラムが対象ページのHTMLを読み取ったときに文章構造を正しく判断できます。

コンテンツを内包する<body>要素は、コンテンツモデルセクショニングルートと呼ばれる特別なカテゴリに属しており、アウトラインのツリー構造の最上位のセクションを構成します。ブラウザはこの最上位セクションの下に、以降で説明する「明示的なアウトライン構成」と「暗黙的なアウトライン構成」のアルゴリズムを適宜組み合わせてアウトラインを構成しています。

HTML文書のアウトラインを確認するには以下のツールが有用です。

明示的なアウトライン構成

明示的なアウトライン構成は、セクショニングコンテンツに属する要素を用いて以下の手順でセクションを構成していきます。

  1. <body>要素によりルート階層を構成
  2. HTML文書内の記述順により、セクションごとに以下の処理を順次実行
    1. 前のセクションと同じ階層のときは同じ階層に追加
    2. 前のセクションの子階層のときは小階層に追加
    3. 前のセクションより上位階層のときは親階層に追加

暗黙的なアウトライン構成

暗黙的なアウトライン構成は、見出しコンテンツを用いて以下の手順でセクションを構成していきます。

  1. セクション内に初めて出現した見出しでセクションを校正
  2. HTML文書内の記述順により、見出しごとに以下の処理を順次実行
    1. 次の見出しが上位以上のランクであれば新しいセクションを構築
    2. 次の見出しが下位ランクであれば子階層のセクションを構築

見出しのランクは、<h1>要素 > <h2>要素 > <h3>要素 > <h4>要素 > <h5>要素 > <h6>要素の順で上位ランク→下位ランクとなります。

最終更新日: 2021-02-24
© 2020 ここちい堂. All rights reserved.