HTML のセクションとアウトラインの使用

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

HTML5 の仕様はウェブ文書の構造を標準的なセマンティクスで記述できるようにするいくつかの新しい要素をウェブ開発者にもたらします。この文書では、これらの要素についてと、それらを用いて、どんな文書でも望んだアウトラインを定義するための方法について述べます。

HTML 4 文書の構造

文書の構造、例えば、 <body></body> の間にある内容のセマンティックな構造は、ユーザに対してページを提供するためになくてはならないものです。HTML4 は自身の構造を記述するために文書のセクションとサブセクションを用いる記法を使用します。セクションは HTML の 分割 (Dividing) (<div>) 要素を HTML の 見出し (Heading) 要素 (<h1><h2><h3><h4><h5><h6>) とともに定義し、そして、タイトルを定義します。これらの HTML の分割要素および HTML の見出し要素の関連性は文書の構造とアウトラインを導き出します。

よって、以下のマークアップは……

<div class="section" id="forest-elephants" >
  <h1>マルミミゾウ</h1>
  <p>このセクションでは、あまり知られていないマルミミゾウについて説明します。
    ...このセクションの内容が続きます...
  <div class="subsection" id="forest-habitat">
    <h2>生態</h2>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
     ...このサブセクションの内容が続きます...
  </div>
</div>

……以下のアウトラインを導き出します (暗黙のレベル番号の表示なしで)。

1. マルミミゾウ
   1.1 生態

<div> 要素には新しいセクションを定義する強制力はありません。新しいセクションを暗黙的に生成するには、単に HTML 見出し要素があるだけで十分です。ゆえに以下のマークアップは……

<h1>マルミミゾウ</h1>
  <p>このセクションでは、あまり知られていないマルミミゾウについて説明します。
    ...このセクションの内容が続きます...
  <h2>生態</h2>
  <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
    ...このセクションの内容が続きます...
  <h2>食性</h2>
<h1>スナネズミ</h1>

……以下のアウトラインを導き出します。

1. マルミミゾウ
   1.1 生態
   1.2 食性
2. スナネズミ

HTML5 によって解決された問題

HTML 4 定義による文書の構造と間接的アウトライン化アルゴリズムは非常におおざっぱであり、そこから数多くの問題が生じます。

  1. セマンティックなセクション定義のために <div> を使用するときは、class 属性に特定の値を定義しない方法でアウトライン化アルゴリズムを自動化すること不可能です ("ページのアウトラインの <div> パートは、セクションとサブセクションを定義することになりますか?" あるいは "表現だけに関する <div> なのか、スタイルだけに関するものなのかを判別できますか?")。他の面から言えば、HTML4 仕様はどこがセクションでそのスコープがどのように定義されるのかが非常にあいまいです。 アウトラインの自動生成は、文書構造に従ってユーザに情報を提供する方法を採用するような、支援技術にとって特に重要です。HTML5 では HTML セクション要素である <section> という新しい要素が導入され、アウトライン化アルゴリズムから <div> 要素の必要性が排除されます。
  2. 文書をマージすることが困難: メイン文書にサブ文書が含まれることは、HTML 見出し要素のレベルの変更を意味し、そうしてアウトラインが維持されます。この問題は HTML5 では新しくセクショニング要素 (<article><section><nav> および <aside>) が導入されることで解決されます。これらの要素は、内部の見出しによって作成されたセクションが何であるかに関わらず、常にそれらの一番近い祖先のサブセクションです。
  3. HTML4では、すべてのセクションは文書アウトラインの一部でした。 しかし、文書はしばしば一本筋ではありません。 文書には、広告や説明用の領域のように、本筋と関係があってもその一部分ではない情報を含む特別なセクションがあることがあります。 HTML5 では、メインアウトラインの一部ではないそのようなセクションを示すことができる <aside> 要素が導入されます。
  4. 繰り返しになりますが、HTML4 では、 すべてのセクションは文書アウトラインの一部なので、ロゴ、メニュー、目次、あるいは、著作権情報および法的通知のような、文書にではなく、サイト全体に関連する情報を含むセクションを示す方法がありません。そのような目的のために、HTML5 では、次の 3 つの特有のセクション要素が導入されます。: 目次のようなリンクの集まりのための <nav>、サイトに関連した情報のための <footer><header><header><footer> は、<section> のようなセクショニングコンテンツではなく、セクションの一部をセマンティックにマークアップするための要素ですので注意してください。

一般的には、 HTML5 により、正確にセクション指定と見出し指定が可能になり、それによって、文書のアウトラインが正確に予測できるようになり、それらを利用することで、ブラウザーはユーザエクスペリエンスを向上させます。

HTML5 のアウトラインアルゴリズム

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

HTML がセクションやアルゴリズムを扱う方法のアルゴリズムを考えてみましょう。

セクションの定義

<body> 要素内に置かれるすべての内容がセクションの一部です。 HTML5 でのセクションは入れ子にできます。 <body> 要素によって定義される、メインセクションの他にも、セクションの境界は明示的に、または、暗黙的に定義されます。 明示的に定義されるセクションは、 <body><section><article><aside><nav> タグ内の内容です。

各セクションは独自の見出し階層を持つことができます。ですから、入れ子の中のセクションでも、<h1> を持つことができます。見出しの定義をご覧ください。

例を見てみましょう。 — ここに、最上位のセクションとフッターが定義されている文書があります。最上位のセクションの中に、3つのサブセクションあり、2つの <section> 要素と1つの <aside> 要素で定義されています。

<section>

  <h1>マルミミゾウ</h1> 

  <section>
    <h1>はじめに</h1>
    <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。</p>
  </section>

  <section>
    <h1>生態</h1>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。</p>
  </section>

  <aside>
    <p>広告ブロック</p>
  </aside>

</section>

<footer>
  <p>(c) 2010 The Example company</p>
</footer>

これは以下の構造を導き出します。

1. マルミミゾウ
   1.1 はじめに
   1.2 生態

見出しの定義

重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。

HTML のセクショニング要素が文書構造を定義する一方で、アウトラインは利便性のために見出しも必要とします。基本的なルールは単純です: 最初の HTML 見出し要素 (<h1><h2><h3><h4><h5><h6> の中から 1 つ) が現在のセクションの見出しを定義します。

見出し要素は要素名の数字によって与えられる順位を持っています。 <h1>最も高い順位であり、 <h6>最も低い順位です。相対的な順位付けはセクション内のみのことであり、セクションの見出し順位ではなく、セクションの構造がアウトラインを決定します。例えば、このコードはを考えてください。

<section>
  <h1>マルミミゾウ</h1>
  <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。 
    ...このセクションが続きます...
  <section>
    <h2>生態</h2>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
        ...このサブセクションが続きます...
  </section>
</section>
<section>
  <h3>スナネズミ</h3>
  <p>このセクションでは、有名なスナネズミについて説明します。 
    ...このセクションが続きます...
</section>

これは次のようなアウトラインを生成します。

1. マルミミゾウ
   1.1 生態
2. スナネズミ

見出し要素の順位 (例では、最初のトップレベルセクションのための <h1>、サブセクションの <h2>、および、セカンドトップレベルセクションのための <h3> ) は重要ではないことに注意してください。明確さを失いますし、推奨しませんが、どんな順位でも明確に定義されたセクションでの見出しとして用いることができます。

暗黙的なセクショニング

HTML5 のセクショニング要素は HTML4 が多数である既存のウェブと互換性を保つようにアウトラインを定義することを強制しないので、それらを用いずにセクションを定義する方法があります。これは暗黙的なセクショニングと呼ばれます。

HTML 見出し要素 (<h1> から <h6> まで) が自身の親要素内で、明示的であるセクションの最初の見出しではないとき、それらは新しい、暗黙的なセクションを定義します。この方法では、この暗黙的なセクションは親セクションでの以前の見出しとの相対的な順位によって定義されたアウトライン内に配置されます。 もしそれが以前の見出しより低い順位である場合は、暗黙的なサブセクションが始まります。このコードは:

<section>
  <h1>マルミミゾウ</h1>
  <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。
    ...このセクションが続きます...
  <h3 class="implicit subsection">生態</h3>
  <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
    ...このサブセクションが続きます...
</section>

以下のアウトラインを導き出します。

1. マルミミゾウ
   1.1 生態 (h3 要素によって暗黙的に定義)
   

もしそれが以前の見出しと同じ順位である場合は、以前のセクションが終了して (たとえ明示的なものであっても!) 、新しい暗黙的なセクションが同じレベルで始まります。:

<section>
  <h1>マルミミゾウ</h1>
  <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。
    ...このセクションが続きます...
  <h1 class="implicit section">スナネズミ</h1>
  <p>スナネズミはかわいくて小さな哺乳類です。
    ...このセクションが続きます...
</section>

これは次の様なアウトラインを導き出します。

1. マルミミゾウ
2. スナネズミ (h1 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する )

もし以前の見出しより高い順位の見出しが現れた時点で、以前のセクションは終了し、新しい暗黙的なセクションがより高いレベルで始まります。

<body>
  <h1>哺乳類</h1>
  <h2>くじら</h2>
  <p>このセクションでは、泳ぐくじらについて説明します。
     ...このセクションが続きます...
  <section>
    <h3>マルミミゾウ</h3>  
    <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。
      ...このセクションが続きます...
    <h3>スナネズミ</h3>
      <p>大多数のスナネズミ (訳注:モンゴリアン・ジャービル) はモンゴルから遠く離れた範囲にも広く生息しています。
      ...このサブセクションが続きます...
    <h2>爬虫類</h2>
      <p>爬虫類は冷血動物です。
      ...このサブセクションが続きます...
  </section>
</body>

上記コードは、以下のアウトラインを導き出します。

1. 哺乳類
   1.1 くじら (h2 要素によって暗黙的に定義された)
   1.2 マルミミゾウ (セクション要素によって明示的に定義された)
   1.3 スナネズミ (h3 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する)
2. 爬虫類 (h2 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する)

これは見出しタグをぱっと見て期待するであろうアウトラインとは異なるかもしれません。マークアップを人間が理解できるようにするためには、セクションの開始と終了のために明示的なタグを用い、セクションの入れ子になっているレベルの意図された通りに見出しの順位を付けるのが良い習慣です。しかし、これは HTML5 の仕様が要求するものではありません。ブラウザーが文書のアウトラインを意図しない方法で描画するのであれば、セクションが見出し要素によって暗黙的に閉じられていないかどうか確認してください。

見出しの順位をセクションが入れ子になっているレベルに合わせるべきであるという習慣的ルールの例外は、複数の文書で再利用される可能性があるセクションです。例えば、1 つのセクションがコンテンツマネジメントシステム内に保存され、閲覧時に複数の文書内に埋め込まれるかもしれません。このケースでは、再利用可能なセクションの一番最初の見出しレベル向けに <h1> で始めるのが良い習慣です。再利用可能なセクションの入れ子のレベルはそれが表示される文書のセクションの階層によって決定されることになります。明示的なセクションタグはこのケースでも有用です。

区分化ルート

区分化ルートはそれ自身がアウトラインを持っていますが、それらの中のセクションと見出しはそれらの祖先のアウトラインに影響を与えない HTML 要素です。文書の論理的な区分化ルートである <body> を除けば、 <blockquote>, <details>, <fieldset>, <figure>, <td> の各要素が外部コンテンツをページに持ち込みます。 。

例:

<section>
  <h1>マルミミゾウ</h1> 
  <section>
    <h2>はじめに</h2>
    <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。</p>
  </section>
  <section>
    <h2>生態</h2>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
       「<cite>ボルネオ島におけるマルミミゾウ</cite>」で科学者が言っていることを見てましょう。:</p>
    <blockquote>
       <h1>ボルネオ島
       <p>マルミミゾウはボルネオ島に住んでいます...</p>
    </blockquote>
  </section>
</section>

この例は以下のアウトラインを導き出します。

1. マルミミゾウ
   1.1 はじめに
   1.2 生態

このアウトラインには、外部からの引用である <blockquote> 要素の内部のアウトラインは含まれません。<blockquote> 要素は区分化ルートであり、その内部のアウトラインは独立しています。

アウトライン外のセクション

HTML5 では、ウェブ文書のメインアウトラインに属さないセクションの定義を可能にする 2 つの新しい要素が導入されました。

  1. HTML のアサイドセクション要素 (<aside>) は、主要素に関連するけれども、説明コラムや広告などの本筋には属さないセクションを定義します。それ自身のアウトラインを持ちますが、メインアウトラインには属しません。
  2. HTML ナビゲーションセクション要素 (<nav>) は、ナビゲーションリンクを含むセクションを定義します。文書内に存在するそのようなものの例は、ページ内リンクや、目次、サイトナビゲーションリンクなどのようなものです。これらのリンクは本筋およびメインアウトラインの一部ではありません。 また、一般的にはスクリーンリーダーやそれに類似した支援技術では、最初に情報として提供されないでしょう。

ヘッダーとフッター

HTML5 では、セクションのヘッダーやフッターをマークアップするために使用できる、2 つの新たな要素を導入しました:

  1. HTML ヘッダー要素 (<header>) は、ページのヘッダー (一般的にはサイト名のロゴと水平方向のメニューを含んでいます) やセクションのヘッダー (セクションの見出し、作者名などを含むでしょう) を定義します。 <article><section><aside><nav> が、自身の <header> を持つことができます。<header> という名前ですが、必ずしもページの最初に配置する必要があるわけではありません。
  2. HTML フッター要素 (<footer>) は、ページのフッター (一般的には著作権と法的通知、および、ときどき、いくつかのリンクを含んでいます) やセクションのフッター (セクションの発行日、ライセンス情報などを含むでしょう) を定義します。 <article><section><aside><nav> が、自身の <footer> を持つことができます。<footer> という名前ですが、必ずしもページの最後に配置する必要があるわけではありません。

これらはアウトラインの新たなセクションを生成せず、ページ内のセクションのコンテンツをマークアップするものです。

セクショニング要素でのアドレス

文書の作者はしばしば、作者の名前やアドレスなどの連絡情報を公開したいことがあります。HTML4 では、<address> 要素によりこれが可能でしたが、HTML5 ではそれが拡張されています。

文書は別々の作者による異なるセクションから作られることがあります。メインページの作者とは異なる作者によるセクションは <article> 要素を用いて定義されます。 その結果として、<address> 要素はそれの一番近い <body> または <article> の先祖とリンクされるようになります。

HTML5 非対応ブラウザーでのHTML5 要素の利用

セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。

HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で display:inline としてスタイル付けされるため、これらには display: block と設定したいところです。

article, aside, footer, header, nav, section {
  display:block;
}

もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 <time> 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。

さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    document.createElement("time");
  </script>
<![endif]-->

最後の予防措置として、 <head> 要素内に明示的に <noscript> 要素を追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。

<noscript>
  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
</noscript>

まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。:

<!--[if lt IE 9]>
  <script>
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("nav");
    document.createElement("section");
    document.createElement("time");
  </script>
<![endif]-->
<noscript>
  <p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
  <p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
    ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
  <p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
</noscript>

メモ: このコードは HTML validator でエラーを発生させます。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。

まとめ

HTML5 で導入された新しいセクションおよび見出し要素はウェブ文書の構造とアウトラインを標準の方法で表現できるようにします。それらは HTML5 ブラウザーを持ち、ページを理解することを助けるための構造を必要とする人々、例えば、いくつかの支援技術の助けを必要とする人々に大きな利点をもたらします。これらの新しいセマンティック要素は単純に利用でき、負担は非常に少なく. HTML5 非対応ブラウザーでも動作するようにできます。それゆえ、それらを制限なく利用すべきです。