HTML5 ドキュメントのセクションとアウトライン

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

HTML4 のドキュメントの構造

ドキュメントの構造、例えば、<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 によって解決される問題

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

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

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

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

HTML5 でのセクション定義

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

註: 各セクションはそれ自身の見出し階層を持ち得ます。ですから、入れ子の中のセクションでも、<h1> を持ち得ます。 HTML5での見出し定義 を参照してください。

例:

<section>
  <h1>マルミミゾウ</h1> 
  <section>
    <h1>はじめに</h1>
    <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。
  </section>
  <section>
    <h1>生態</h1>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。 
  </section>
  <aside>
    <p>広告
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company
</footer>

この HTML スニペットは 2 つのトップレベルセクションを定義します:

 <section>   
  <h1>マルミミゾウ</h1>    
  <section>     
    <h1>はじめに</h1>     
    <p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。
  </section>   
  <section>     
    <h1>生態</h1>
    <p>マルミミゾウはサバンナには生息せず、森林に生息しています。
  </section>
   <aside>
    <p>広告
  </aside>
</section>

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

最初のセクションには 3 つのサブセクションがあります:

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

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

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

  <aside>
    <p>広告
  </aside>
</section>

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

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

1. マルミミゾウ
   1.1 はじめに
   1.2 生態
   1.3 セクション (aside)

HTML5 での見出し定義

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 が多数である既存の Web と互換性を保つようにアウトラインを定義することを強制しないので、それらを用いずにセクションを定義する方法があります。これは暗黙的なセクショニングと呼ばれます。

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 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する)
   1.4 爬虫類 (h2 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する)

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

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

暗黙的なセクショニングのオーバーライド

しばしば、1 つのセクションに複数の見出しを必要とすることがあります。数少ない通常のケースは:

  • 副題を持つ本あるいは映画についてのセクション:
    <section>
      <h1>ジャスティーヌ</h1>
      <h2>美徳の不幸</h2>
    </section>
    

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

    1. ジャスティーヌ
       1.1 美徳の不幸
    
  • タグリストのために用いられるかもしれない副見出し:
    <section>
      <h1>ドキュメントのセクションとアウトライン</h1>
      <h2>HTML, HTML5, Sections, Outlines</h2>
    </section>
    

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

    1. ドキュメントのセクションとアウトライン
       1.1 HTML, HTML5, Sections, Outlines
    

暗黙的なセクショニングがあるために、これは HTML5 で導入された HTML の見出しグループ要素 (<hgroup> の助け無しには不可能です。それはすべての見出しを、一番最初のもの以外、外部から隠して、暗黙的なセクショニングをオーバーライド可能にします。この要素を用いた副題を持つ本の例:

<section>
  <hgroup>
    <h1>ジャスティーヌ</h1>
    <h2>美徳の不幸</h2>
  </hgroup>
</section>

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

1. ジャスティーヌ

セクショニングルート

セクショニングルートはそれ自身がアウトラインを持っていますが、それらの中のセクションと見出しはそれらの子孫のアウトラインに影響を与えない HTML 要素です。ドキュメントの論理的なセクショニングルートである <body> を除けば、 これらはページに追加された外部の内容を示す要素です。: <blockquote><details><fieldset><figure> および <td>

例:

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

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

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

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

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

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

  1. HTML のアサイドセクション要素 (<aside>) は、主要素に関連するけれども、説明コラムや広告などの本筋には属さないセクションを定義します。それ自身のアウトラインを持ちますが、メインアウトラインには属しません。
  2. HTML ナビゲーションセクション要素 (<nav>) は、ナビゲーションリンクを含むセクションを定義します。ドキュメント内に存在するそのようなものの例は、ページ内リンクや、目次、サイトナビゲーションリンクなどのようなものです。これらのリンクは本筋およびメインアウトラインの一部ではありません。 また、一般的にはスクリーンリーダーやそれに類似した支援技術では、最初に情報として提供されないでしょう。
  3. HTML ヘッダーセクション要素 (<header>) は、一般的にはサイト名のロゴと水平方向のメニューを含んでいる、ページのヘッダーを定義します。その名前に反して、ページの最初に配置する必要はありません。
  4. HTML フッター要素 (<footer>) は、一般的には著作権と法的通知、および、ときどき、いくつかのリンクを含んでいる、ページのフッターを定義します。その名前に反して、ページの最後に配置する必要はありません。

セクショニング要素でのアドレスと発行時間

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

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

同様に、新しい HTML5 <time> 要素も、pubdate 真偽属性が設定されていれば、ドキュメント全体、各記事、それに一番近い <body> または <article> の先祖に結びついた発行日付を示します。

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

セクションとヘッダ要素はほとんどの HTML5 非対応ブラウザでも有効にするべきです。それらは未サポートですが、特別な DOM インタフェースは必要ではなく、デフォルトでは display:inline としてスタイル指定される未知の要素に対しての特定の CSS スタイル指定を必要とします。:

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

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

この方法には制限があります。なぜなら、サポートしていない要素のスタイル指定を許可しないブラウザがあるためです。Internet Explorer (バージョン 8 以下) の場合、サポートしない要素のスタイル指定を許可するためには、以下のようなスクリプトが必要です。:

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

このスクリプトは、Internet Explorer (バージョン 8 以下) の場合において、スクリプトの実行が HTML5 のセクショニング、見出し要素を正しく表示するために有効化されるべきであることを意味しています。もしスクリプトの実行が有効化されていない場合、それらの要素は表示されず、それらの要素でページ全体の構造を定義しようとしているならば、問題になるでしょう。そのような場合のために <noscript> 要素を追加します:

<noscript>
   <strong>警告!</strong>
   お使いのブラウザが HTML5 をサポートしていないため、いくつかの要素が JScript を用いてシミュレートされます。
   残念なことに、お使いのブラウザはスクリプトの実行が無効化されています。このページを表示するためにスクリプトの実行を有効にしてください。
</noscript>

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

<!--[if lt IE 9]>
  <script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("section");
    document.createElement("aside");
    document.createElement("nav");
    document.createElement("article"); 
    document.createElement("hgroup");
    document.createElement("time");
  </script>
  <noscript>
     <strong>警告!</strong>
     お使いのブラウザが HTML5 をサポートしていないため、いくつかの要素が JScript を用いてシミュレートされます。
     残念なことに、お使いのブラウザはスクリプトの実行が無効化されています。このページを表示するためにスクリプトの実行を有効にしてください。
  </noscript>
<![endif]-->
【訳注: ※上記内容は最低限のものであり、完全ではありません。次のライブラリの使用を検討して下さい: html5shiv - HTML5 IE enabling script - Google Project Hosting

まとめ

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

Document Tags and Contributors

タグ:
Contributors to this page: saneyuki_s, kj, ethertank, teoli, DavidWalsh, Potappo
最終更新者: ethertank,