暗黙的なアウトラインとHTML5以前の問題点

しかし、この方法は「見出しの及ぶ範囲が分かりにくい」という欠点がありました。何故ならばh1〜h6を正しく用いたとしても、ソースコード上では全てフラットな関係であり、見出しが影響するコンテンツの終了部分を明示的に表す事が出来ないからです。

人間であれば文字の大きさやデザインなどで視覚的な情報からアウトラインを判断したり、書いてある文章の意味から文章構造を推測・判断することができます。しかしコンピュータやクローラーなどはそうはいきません。コンピュータに文章構造を正確に理解させるには旧来のHTMLの仕様では限界がありました。これらの問題は本当の意味での「セマンティックWeb」を実現するための課題だったとも言るでしょう。

HTML5で導入された新たなアウトラインアルゴリズム

前述した通り旧来の(X)HTMLでは文章構造を正確にマークアップするには役不足でした。こうした点を改善し、文章構造をより正確に表すための仕組みがXHTML2.0で考えられました。それがsection要素です。

その仕様はXHTML2.0からHTML5に受け継がれ、HTML5ではsection,article,nav,asideといった4つの新しい要素(セクショニングコンテンツ)が定義されました。HTML5で導入されたセクショニングコンテンツとアウトラインアルゴリズムはより正確に、厳密に文章構造を表すための仕組みと言えます。

HTML5のアウトライン生成を理解する

HTML5でアウトラインを生成するのはセクショニングコンテンツに属する4つのタグです。セクショニングコンテンツそれぞれのタグの意味や使い方については他のサイトやブログに譲って、ここではアウトライン生成について詳しくみていきます。

まず、次のようにセクショニングコンテンツを使わずに、旧来のh1〜h6だけを使ったマークアップを見ていきましょう。

大見出し1-1
中見出し2-1
中見出し2-2
中見出し2-3
小見出し3-1
中見出し2-4

実はHTML5では旧来の書き方でもちゃんとアウトラインは生成されます。上記の例のアウトラインは下記sectionを使ったものと同等です。

大見出し1-1
     

     
中見出し2-1
     
     

     
中見出し2-2
     
     

     
中見出し2-3
          

          
小見出し3-1
          
     
     

     
中見出し2-4
     

上記2つの例のアウトラインはいずれも以下のようになります

上記2つの例はW3CのHTML5仕様書に載っているものと同じものです。W3CはHTML5の仕様書で次のように述べています

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

つまりはh1〜h6を用いて暗黙的なセクション作るのではなく、セクショニングコンテンツを適切に用いて明示的にセクションを示すよう勧めています。

上記2つの例を比べると奇妙な点に気づきます。そう、2つ目の例では全ての見出しレベルがh1になっています。実はHTML5ではセクショニングコンテンツを使ってマークアップすればh1〜h6という「数字で表される見出しレベル」は実質的に意味は無くなってしまいます。これはアウトラインが全て「セクショニングコンテンツの入れ子(ネスト)とその深さ(レベル)」によって決まるためです。

HTML5でセクショニングコンテンツを適切に用いてマークアップする場合、見出しを全てh1でマークアップしても、全てh6でマークアップしても、下記例のようにバラバラにマークアップしたとしても全て生成されるアウトラインは同一になります。

HTML5について
HTML5は最終草案の段階です
    

    
HTML5は使えるのか
    
現在でも使う事ができます。HTML5は...略
        

        
IE8以下の対応策
        
IE6,7,8もサポートする場合はJavaScriptを使って...略
        
        

        
どのブラウザが対応しているのか
        
Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。
        
    
    

    
HTML5の新しい要素
    
section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略
    

しかし文法的に許容されていても、これは非常にわかりにくい書き方ですね。極力このような書き方は避けるべきです。次のように適切にセクショニングコンテンツと適切な見出しレベルを用いて記述しましょう。

HTML5について
HTML5は最終草案の段階です

HTML5は使えるのか
現在でも使う事ができます。HTML5は...略

どのブラウザが対応しているのか
Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。


IE8以下の対応策
IE6,7,8もサポートする場合はJavaScriptを使って...略



HTML5の新しい要素
section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略

また先ほどの例と同じように全ての見出しをh1のみで書く事もできます。

HTML5について
HTML5は最終草案の段階です...略


HTML5は使えるのか
現在でも使う事ができます。HTML5は...略
  

  
ブラウザの対応状況
  
Chrome, Safari, Firefoxといったモダンブラウザは先行実装しています。IE9もサポートしています。
  
  

  
IE8以下の対応策
  
IE6,7,8もサポートする場合はJavaScriptを使って...略
  


HTML5の新しい要素
section,articleやvideoなどの新しい要素や属性が定義されています。他にも...略

h1だけを使うべきか or ネストレベルに合わせたh1〜h6を使うべきか

ここでまた一つ疑問がわいてきました。セクショニングコンテンツを用いて明示的にセクションを囲う場合、【見出しは全てh1でかこった方が良いのか、それとも入れ子になったセクショニングコンテンツの階層に合わせた見出しレベルにするべきなのか】どちらがよいのでしょうか？

W3Cの仕様書には次のようにあります。

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

[意訳] セクションは(h1〜h6)いずれの見出しも含む事ができるが、h1要素のみを使って見出しをマークアップするか、セクションの入れ子レベルに応じた適切なランクの見出し要素を使う事を強く推奨する。

つまり、仕様上はどっちでもOKということですね。ただし、両方をごっちゃにして使う事は避けた方が良いようです。

個人的には全てh1でマークアップするよりはネストレベルに応じて(h1〜h6)を適切に付けるマークアップのほうが現時点(2011年9月現在)ではベターなのかなと思います。何故ならばHTML5に対応していない古いブラウザやソフトウェア、スクリーンリーダーなどがまだ存在するためです。HTML5でもh1〜h6を残したのは後方互換性も考慮されたからでしょう。