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

重要: 現在、一般的なブラウザや支援技術のユーザエージェントでアウトラインアルゴリズムを実装したと知られているものはありませんが、適合性チェッカーなどのソフトウェアがアルゴリズムを実装しています。従ってアウトラインアルゴリズムを、ユーザにドキュメントの構造を伝えるものとしてあてにすることはできません。作者には、見出しの順位 (h1-h6) を使用してドキュメントの構造を伝えることを推奨します。

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

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

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

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

HTML5 でのセクション定義

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

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

例:

<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>

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

 <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
</footer>

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

<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
</footer>

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

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

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 要素によって暗黙的に定義された。それと同時に以前のセクションが終了する)
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 では、 Web ドキュメントのメインアウトラインに属さないセクションの定義を可能にする 2 つの新しい要素が導入されました。

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

ヘッダーとフッター

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

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

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

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

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

ドキュメントは別々の作者による異なるセクションから作られることがあります。メインページの作者とは異なる作者によるセクションは <article> 要素を用いて定義されます。その結果として、<address> 要素はそれの一番近い <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 非対応ブラウザでも動作するようにできます。それゆえ、それらを制限なく利用すべきです。

HTML5 関連文書

HTML	Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags
JavaScript	Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS	NewSelectors Typography Visual Effects