株式会社グルコム
Web関連

ドラえもん、で例えてみるHTML5のセクションとアウトラインについて


140218

HTML5のセクションとアウトラインについてはHTML5.jpさんの見出しとセクションという記事にて詳細に解説されていますが、とても厳密に定義の説明をされている(記事を翻訳してくださっている)ので、「ざっくり」と理解するのが少々大変です。そこで、HTML5のセクションやアウトラインについて「ざっくり」とした説明を試みてみます。念のため申し上げますと、深く理解しようとされるのであれば上記のHTML5.jpさんをご覧ください。HTML5について広範囲な情報を扱っていらっしゃいます。

さて、姑息な言い訳も済ませましたので、早速説明していきたいと思います。

アウトライン

“アウトライン”とはその名の通り「輪郭」を意味します。文書のアウトラインですから、「あらまし」となります。例えば、おおまかな構成を考えて、見出しを付けてから中身を書いていく、というような文書をイメージしてください。

  • ドラえもん
    • ドラえもんとは?
      • 目的について
      • 家族構成
      • 耳の無い理由
    • ひみつ道具とは?
      • 四次元ポケット
      • 登場したひみつ道具の説明
        • タケコプター
        • どこでもドア
        • もしもボックス

このように見出しとその順番や関係など文書の「輪郭」がアウトラインです。

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

先ほどのアウトラインを別の表現にすると以下のようになります。

  • ドラえもん
    • ドラえもんとは?
      • 目的について
      • 家族構成
      • 耳の無い理由
    • ひみつ道具とは?
      • 四次元ポケット
      • 登場したひみつ道具の説明
        • タケコプター
        • どこでもドア
        • もしもボックス

この四角い「箱」が“セクション”です。セクションは“セクショニング・コンテンツ”に分類されたHTML要素によって作られます。セクショニング・コンテンツに分類されるHTML要素はARTICLE要素、ASIDE要素、NAV要素、そしてSECTION要素があります。

セクショニング・コンテンツは見出しを持ちます。見出しは“ヘッディング・コンテンツ(要はH1〜H6要素)”によって表されます。上記アウトラインをSECTION要素とH1〜H6要素で擬似的にマークアップすると以下のようになります。

  • <h1>ドラえもん</h1>
    • <section><h2>ドラえもんとは?</h2>
      • <section><h3>目的について</h3></section>
      • <section><h3>家族構成</h3></section>
      • <section><h3>耳の無い理由</h3></section>
      </section>
    • <section><h2>ひみつ道具とは?<h2>
      • <section><h3>四次元ポケット</h3></section>
      • <section><h3>登場したひみつ道具の説明</h3>
        • <section><h4>タケコプター</h4></section>
        • <section><h4>どこでもドア</h4>
          </section>
        • <section><h4>もしもボックス</h4>
          </section>
        </section>
      </section>

セクショニング・ルート

セクショニング・コンテンツとは別に、“セクショニング・ルート”に分類されるHTML要素もあり、BLOCKQUOTE要素、BODY要素などがあります。セクショニング・ルートは「アウトラインを持つことができる」要素のことで、BODY要素のように「セクションで区切られたアウトライン」を持つことができますが、それ自体はセクショニング・コンテンツとはなりません(内部処理的にはセクションを作りますが、分類としてはセクショニング・コンテンツではありません)。また、BLOCKQUOTE要素のようにセクションがセクショニング・ルートを持つこともありますが、外側のアウトラインと内側のアウトラインは別ものになります。

例えば、以下は先ほどの例にセクショニング・ルートを追加したものです(太い枠線がセクショニング・ルートとなります)。BLOCKQUOTE要素による引用が追加され、それぞれの引用部分内に見出し(H1要素)がありますが、これらの見出しはBODY要素をセクショニング・ルートとするアウトラインには影響しませんので、BODY要素のアウトラインは冒頭のリストと同一になります。

  • <body><h1>ドラえもん</h1>
    • <section><h2>ドラえもんとは?</h2>
      • <section><h3>目的について</h3></section>
      • <section><h3>家族構成</h3></section>
      • <section><h3>耳の無い理由</h3>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
        </section>
      </section>
    • <section><h2>ひみつ道具とは?<h2>
      • <section><h3>四次元ポケット</h3>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
        </section>
      • <section><h3>登場したひみつ道具の説明</h3>
        • <section><h4>タケコプター</h4></section>
        • <section><h4>どこでもドア</h4></section>
        • <section><h4>もしもボックス</h4>
          • <blockquote>
            <h1>見出し</h1>
            <p>引用文</p>
            <p>引用文</p>
            </blockquote>
          </section>
        </section>
      </section>
    </body>

見出し要素のランクと暗黙のセクション

H1〜H6の見出し要素(ヘッディング・コンテンツ)には、それぞれ“ランク”が設定されます。ランクはH1要素が最も高くなり、H6要素が最も低くなります。

ヘッディング・コンテンツのランクは文書全体ではなくセクションと結びつきます。ですから、セクションが明示的であれば以下のようにすべてH1要素で記述しても問題はありません。

  • <body><h1>ドラえもん</h1>
    • <section><h1>ドラえもんとは?</h1>
      • <section><h1>目的について</h1></section>
      • <section><h1>家族構成</h1></section>
      • <section><h1>耳の無い理由</h1>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
        </section>
      </section>
    • <section><h1>ひみつ道具とは?<h1>
      • <section><h1>四次元ポケット</h1>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
        </section>
      • <section><h1>登場したひみつ道具の説明</h1>
        • <section><h1>タケコプター</h1></section>
        • <section><h1>どこでもドア</h1></section>
        • <section><h1>もしもボックス</h1>
          • <blockquote>
            <h1>見出し</h1>
            <p>引用文</p>
            <p>引用文</p>
            </blockquote>
          </section>
        </section>
      </section>
    </body>

同一セクション内にランクの異なるヘッディング・コンテンツが存在する際は、暗黙のセクションが作られます。先ほどの例を、今度はヘッディング・コンテンツのランクを利用することでSECTION要素を省略する記述にしたものが以下になります。

  • <body><h1>ドラえもん</h1>
    • <h2>ドラえもんとは?</h2>
      • <h3>目的について</h3>
      • <h3>家族構成</h3>
      • <h3>耳の無い理由</h3>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
    • <h2>ひみつ道具とは?<h2>
      • <h3>四次元ポケット</h3>
        • <blockquote>
          <h1>見出し</h1>
          <p>引用文</p>
          <p>引用文</p>
          </blockquote>
      • <h3>登場したひみつ道具の説明</h3>
        • <h4>タケコプター</h4>
        • <h4>どこでもドア</h4>
        • <h4>もしもボックス</h4>
          • <blockquote>
            <h1>見出し</h1>
            <p>引用文</p>
            <p>引用文</p>
            </blockquote>
    </body>

SECTION要素で明示的にセクションを作る記述と、ヘッディング・コンテンツのランクで暗示的にセクションを作る記述の、どちらも妥当な記述ですが、その両方が混在するような記述は(とても解り辛いので)避けるべきでしょう。

株式会社グルコムについて

私たちは、ウェブ制作・ウェブマーケティングサービスを提供して、12年以上の実績がある会社です。 これまでの経験を活かし、ウェブ制作・運用・集客・SEO対策や、セミナー・ウェブ担当者向け教育サービスなどをお客様にご提供しています。