HTMLの基礎知識

セクションとアウトライン

「セクション」と「アウトライン」は、HTML文書の構造を明示するための仕組みです。HTML5の仕様では、セクショニングコンテンツを利用してアウトラインを示すことが推奨されています。

従来のセクションとアウトライン

従来のHTMLでは、見出し要素とそれに続くコンテンツによって「セクション」を形成し、見出し要素をレベルごとに使い分けて「アウトライン」を表しました。

以下の例では、Webページのタイトルをh1要素で示し、h2要素、h3要素と続けて記事の一覧を示しています。さらに、ページ下部にはWebページに関する連絡先がh2要素で見出しを付けて記述されています。従来のHTMLでアウトラインを示すには、このように見出し要素を適切に選択する必要があります。

<h1>カフェ店長の日記</h1>
<h2>記事の一覧</h2>
<h3>12月24日のできごと</h3>
<p>閉店後、夜更け過ぎに雪が降ってきました。</p>
<h3>12月25日のできごと</h3>
<p>クリスマスパーティーを開催しました。</p>
<h2>連絡先</h2>
<p>連絡先はこちらです</p>

HTML5におけるセクションとアウトライン

新しく定義されたセクショニングコンテンツによって、より柔軟にセクションの範囲を明示できます。見出し要素に関係なく、要素の入れ子構造で文書のアウトラインを表せます。

以下の例ではsection要素の入れ子構造によって、文書のアウトラインを形成しています。見出し要素がすべてh1でも、セクショニングコンテンツによってアウトラインが正しく形成されます。

<h1>カフェ店長の日記</h1>
<section>
  <h1>記事の一覧</h1>
    <section>
      <h1>12月24日のできごと</h1>
      <p>閉店後、夜更け過ぎに雪が降ってきました。</p>
    </section>
    <section>
      <h1>12月25日のできごと</h1>
      <p>クリスマスパーティーを開催しました。</p>
    </section>
</section>
<section>
  <h1>連絡先</h1>
  <p>連絡先はこちらです</p>
</section>

セクションごとの見出し

HTML5の仕様では、セクショニングコンテンツを利用する場合、各セクションの見出しはh1要素で記述すればいいとされています。または、h2以下の見出し要素を、そのセクションの入れ子レベルに合わせて記述することも許可されています。

<body>
<h1>カフェ店長の日記</h1>
<section>
  <h2>記事の一覧</h2>
    <section>
      <h3>12月24日のできごと</h3>
      <p>閉店後、夜更け過ぎに雪が降ってきました。</p>
    </section>
    <section>
      <h3>12月25日のできごと</h3>
      <p>クリスマスパーティーを開催しました。</p>
    </section>
</section>
<section>
  <h2>連絡先</h2>
  <p>連絡先はこちらです</p>
</section>
</body>

ポイント

  • セクショニングコンテンツは必ず見出しを持つとされ、要素内で最初に記述されているヘディングコンテンツがその見出しとして扱われます。見出しとなる要素がない場合は、そのセクションは名無しのセクションとなります。ただし、nav要素やaside要素については、文脈的に見出しを付けることが難しい場合など、無理に見出しを付ける必要はないでしょう。

暗黙的アウトライン

HTML5においてもh1要素などの見出し要素を利用すると、アウトラインが形成されます。このアウトラインは「暗黙的アウトライン」と呼ばれ、以下のように定義されています。

  • 見出し要素の記述があれば、アウトラインを生成するセクションの始まりとする
  • 次の見出し要素の記述があれば、その見出しのレベルを以下のように比較して、アウトラインのレベル（セクション）を決定する
    • 現セクションの見出しレベルより小さければ、下部のセクションになる
    • 現セクションの見出しレベルより大きいか同じであれば、新しいセクションを開始する

セクショニングルートによる独自のアウトライン

セクショニングルートに分類されるbody、blockquote、details、fieldset、figure、td要素は、独自のアウトラインを形成します。ただし、文書全体のアウトラインには影響を与えません。

以下の例では、1つ目のsection要素の内容にblockquote要素があるので、アウトラインに新しいレベルが追加されるように思われますが、blockquote要素の形成するセクションは独立したものとなり、文書の全体構造に関わるセクションとしてはカウントされません。

<section>
  <h1>1月1日のできごと</h1>
  <p>年末に読んで感動した本から引用しよう。</p>
    <blockquote>
    <h2>ここに引用文が入ります。</h2>
    </blockquote>
  </section>
  <section>
    <h1>1月2日のできごと</h1>
    <p>昨日日記で取り上げた本を再読していた。</p>
  </section>
</section>

body要素もセクショニングルートとしてアウトラインを形成します。通常、body要素の子要素として記述したh1要素は、body要素のセクションの見出しとして機能することになります。逆に、以下の例のように文書全体をsection要素でマークアップしてしまうと、body要素の、つまり文書全体の見出しがなくなってしまうので注意しましょう。

<body>
  <section>
  <h1>1月3日のできごと</h1>  
  <!--省略-->
  </section>
</body>

関連まとめ記事