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

セクションとは？

セクションとは、簡単に説明すると見出しの適用範囲のことをセクションと呼んでいます。

本で例えれば、第一章から第二章と章ごとに物語が進んでいく場合、 この第一章部分をセクションと呼びます。また、第一章も第一節、第二節と細分化されますが、この第一節もセクションになります。つまり、見出しが登場してから次の見出しが現れるまでがセクションになります。

HTMLでは、セクションを見出しおよびフッターの範囲を定義するコンテンツと定義されています。

アウトラインとは？

セクションによって構成される見出しの階層構造をアウトラインと呼びます。

もともと、アウトラインは文章の構造・骨格のことで、本の目次のようなものをイメージしてください。

Webページは1冊の本の様なもので、第一章→第二章→第三章と言ったセクションに分けられ、適切な見出しが 各セクションに設定されていることがとても大切です。

HTMLではどうやって表現するの？

ここでは、セクションと関係が深い要素について取り上げていきます。

セクションを構成する上でどこからセクションが始まるのかを定義するセクショニングルートと呼ばれる要素があります。

これは、皆さんが今までHTMLで書いてきたbody要素がこれに該当します。他にも、blockquote、details、dialog、fieldset、figure、td要素もセクショニングルートに該当します。例えば、body要素が「本」全体を表すセクショニングルートだとすれば、body要素以外セクショニングルート要素は、別の本の内容が入れ子になっている（独立したセクション）と考えるとイメージしやすいかもしれません。 body要素以外のセクショニングルート要素については、別のSTEPで詳しく解説します。

ここでは、body要素がセクションの開始であるという理解をしてください。

では、せっかくセクショニングルートという言葉が登場してきたので、要素のカテゴリーについて少しだけ理解を深めていきましょう。これらの言葉やカテゴリーを知らないとダメと言うことはありません。技術的な意味合いが強い内容です（車を運転するのに車の内部まで精通する必要はありませんよね？)。

まだ登場していない要素については他のSTEPで詳説します。1つの要素が複数のカテゴリーに属する場合があります。

要素のカテゴリー

セクションに関係するカテゴリー

セクショニングコンテンツ

見出しおよびフッターの範囲を定義するコンテンツです。

article、aside、nav、section要素が該当します。

ヘディングコンテンツ

セクションのヘッダーを定義します。h1要素が最もランクが高い見出しであり、h6要素が最もランクの低い見出しとなります。

h1,h2,h3,h4,h5,h6,hgroup要素が該当します。

それ以外のカテゴリー（参考程度）

メタデータコンテンツ

既に登場しているhead要素内のtitle要素やmeta要素がこれに該当し、文書のメタ情報の定義や、HTMLのデザイン、プログラムを用いた動的コンテンツの設定、または他の文書との関係を設定する要素が該当します。

meta,title,base,link,noscript,script,style,template要素がメタデータコンテンツです。

フローコンテンツ

body要素内に使用することができるほとんどの要素が該当します。

フレージングコンテンツ

文章の一部分のテキストに意味を持たせるための要素です。

エンベディッドコンテンツ

画像や動画、他のWebリソース等埋め込み型のコンテンツが該当します。

インタラクティブコンテンツ

ユーザーが操作（クリック、タップ、入力など)を行うコンテンツが該当します。

セクショニングコンテンツの種類

では、セクションを表現するためのセクショニングコンテンツについて詳しく見ていきましょう。

• section要素

  section（セクション）要素は、見出しの適用範囲を明示的に表現できます。セクションは、必ず見出しを持つようにしてください。（例外あり) セクションに見出しがない場合、暗黙の見出しが作成されます。

  また、1つのセクション内で複数の見出しを書くことも可能ですが、注意しなければならないのは、見出し自身によってもセクションが作成される場合があることです。

  h1→p→h2→p→h2→pと言った要素が順番に登場した場合、見出し要素が現れる度に暗黙のセクションが作成されます。この時重要となるのが見出しのランクです。

  見出しはh1,h2,h3,h4,h5,h6で表現され、後ろの数字が多いほどランクが低い見出しを表しています。

  同じセクション内で、現在の見出しランクよりも低いランクの見出しが登場した場合、現在のセクションにサブセクションを作成しランクの低い見出しをサブセクションの見出しに割り当てます。

  現在のランク以上の見出しが登場した場合は、親セクションの最後のセクションに追加しその見出しに割り当てます。

  1つのセクション内で複数の見出しが登場しない場合、実はh1〜h6どの見出しを使っても問題ありません。

  信じられないことに、見出しのランクが影響するのは同一セクションに複数の見出しがある場合のみで、しかも、

  現在の見出しよりランクが以上か未満かしか判断していません。h1→h2もh1→h6も同じアウトラインを作成します。

  セクションの例をいくつかご紹介します。

  <h1>アランレストラン</h1>
  <h2>人気メニュー</h2>
  <h3>漢鍋≪山≫</h3>
  <p>エルモ村の伝統料理を再現した、絶品鍋料理。</p>
  <h3>あっさりスープパスタ</h3>
  <p>余計な味付けが一切ない。あっさり塩味のスープパスタ。</p>
  <h3>エビチリ</h3>
  <p>豆板醤の辛さを生クリームがさやしく包み込む辛さ控えめエビチリ。</p>

  作成されるアウトラインの例

  1. アランレストラン
     1. 人気メニュー
        1. 漢鍋≪山≫
        2. あっさりスープパスタ
        3. エビチリ

  ※見出し要素(h1,h2,h3)にのランクに応じて暗黙のセクションが作成されるため、階層構造でアウトラインが作られます。

  これをsection要素を用いて書き換えると以下のようになります。

  <h1>アランレストラン</h1>
   <section>
      <h2>人気メニュー</h2>
      <section>
          <h3>漢鍋≪山≫</h3>
          <p>エルモ村の伝統料理を再現した、絶品鍋料理。</p>
      </section>
      <section>
          <h3>あっさりスープパスタ</h3>
          <p>余計な味付けが一切ない。あっさり塩味のスープパスタ。</p>
      </section>
      <section>
          <h3>エビチリ</h3>
          <p>豆板醤の辛さを生クリームがさやしく包み込む辛さ控えめエビチリ。</p>
      </section>
  </section>
  

  h1要素をsection要素で囲んでいない理由は、body要素がセクションの開始を意味するセクショニングルートだからです。 書く量は増えましたが、情報の区切りが少し分かりやすくなりましたね。この時、適切にインデントしsection要素の開始と終わりがわかるようにしてください。

  section内に登場する見出しランクは問わない為以下も同じアウトラインが作り出されます。

  <h1>アランレストラン</h1>
   <section>
      <h2>人気メニュー</h2>
      <section>
          <h2>漢鍋≪山≫</h2>
          <p>エルモ村の伝統料理を再現した、絶品鍋料理。</p>
      </section>
      <section>
          <h2>あっさりスープパスタ</h2>
          <p>余計な味付けが一切ない。あっさり塩味のスープパスタ。</p>
      </section>
      <section>
          <h2>エビチリ</h2>
          <p>豆板醤の辛さを生クリームがさやしく包み込む辛さ控えめエビチリ。</p>
      </section>
  </section>
  

  注意してください。仕様的に、h1〜h6の使用する順番は問われませんが、 ここではh1〜h6までをランク順に使用することを推奨いたします。 Webページを1冊の本ととらえ、本のタイトルを示すh1要素は1つのみ使用し、他の見出しはh2以下 階層構造を表すようにランクを適切に下げながら構築していくべきです。 実は、HTML4まではセクションという要素はありませんでした、そのためh1〜h6までを順番に利用することでしか 正しくアウトラインを作り出すことができなかったのです。 とはいえ、セクション要素が登場したとしても、h1〜h6までを順番通りに使用することを推奨します。

  同じだとしてもこんなのは嫌ですよね？

  <h1>アランレストラン</h1>
   <section>
      <h6>人気メニュー</h6>
      <section>
          <h5>漢鍋≪山≫</h5>
          <p>エルモ村の伝統料理を再現した、絶品鍋料理。</p>
      </section>
      <section>
          <h4>あっさりスープパスタ</h4>
          <p>余計な味付けが一切ない。あっさり塩味のスープパスタ。</p>
      </section>
      <section>
          <h2>エビチリ</h2>
          <p>豆板醤の辛さを生クリームがさやしく包み込む辛さ控えめエビチリ。</p>
      </section>
  </section>
  

• article要素

  ページ内で独立した内容を表し、ブログの投稿やコメントなどを表現する際に使用されます。

  articleのサンプル

   <h1>本日の料理</h1>
  <article>
      <h2>ロレント名物手作りスコーン</h2>
      <p>昔から伝わる素朴なスコーン</p>
      <section>
          <h3>コメント</h3>
          <article>
              <h4>私も作りました！</h4>
              <p>とても楽しかったです！</p> 
          </article>
          <article>
              <h4>子供には難しい・・・</h4>
              <p>膨らまなかった！</p> 
          </article>
      </section>
  </article>

  ブログの記事自体もarticle要素となり、ブログのコメントも入れ子になったarticle要素で表現することができます。

• aside要素

  aside要素は、本文と関連するコンテンツから構成され、コンテンツから分離したとしても問題がないセクションを表します。メインコンテンツとは別の内容であり、外部リンクや広告などで使用されます。

  asideのサンプル

   <h1>料理レシピ</h1>
    <section>
       <h2>今日の料理</h2>
      <p>巨大ガニのソテー</p>
      <section>
          <h3>材料</h3>
          <p>紺碧の搭で釣れた巨大ガニ、フレッシュハーブ</p>
      </section>
      <section>
          <h3>作り方</h3>
          <p>材料と水を入れ、1時間煮込めば完成。</p>
      </section>
      <aside>
          <h2>紺碧の塔観光情報</h2>
          <p>アイナ街道のはずれにある古びた搭、屋上から見る景色は絶景です</p>
      </aside>
  </section>

  ここでは、料理とは関係がない、観光情報をaside要素で表現しています。

ヘディングコンテンツの種類

次に、HTMLで見出しを表現するめのヘディングコンテンツについて詳しく見ていきましょう。

• h1~h6要素

  セクションの見出しを表します。（既にお馴染みですね。）見出し要素自身も、暗黙のセクションを作り出す点に注意が必要です。

• hgroup要素

  見出しのグループ化要素。hgourpの子要素には、1つ以上のh1〜h6が使用できます。

  見出し＋キャッチフレーズのような複数の見出しレベルが必要な場合に利用できます。

  複数の見出し要素を子要素とした場合、hgroupの見出しランクは子要素の最高位の見出しランクが採用されます。 例えば、hgroup内にh1,h2要素があった場合h1ランクとなり、h2,h3要素があった場合h2ランクとなります。

  hgourpのサンプル

   <h1>映画紹介</h1>
  <section>
      <hgroup>
          <h2>ハリーポッター</h2>
          <h3>ハリー・ポッターと賢者の石</h3>
      </hgroup>
      <section>
          <h3>ストーリー</h3>
          <p>階段下で暮らす男の子の物語。</p>
      </section>
  </section>

  作成されるアウトラインの例

  1. 映画紹介
     1. ハリーポッター
        1. ストーリー

  hgroupは、1つのアウトラインしか作りません。