HTMLのマークアップ時に目的に合った要素を選ぶ方法

そこが知りたい！ Web標準サイトの活かし方（3）

見出しのマークアップ

　文書ツリー構造を意識したマークアップをする際、title要素と並んで重要な要素に、見出し要素（h1～h6要素）が挙げられます。しかし、見出し要素の扱い方については、W3Cの（X）HTMLの仕様上では厳格に決められていないため、マークアップ時の判断に迷うことも少なくありません。

見出し要素の目的と構文ルールの確認

　まずはWeb標準上のルールとして、W3Cの（X）HTMLの仕様を確認しておきましょう。見出し要素は、「そのセクションの話題を簡潔に説明するもの」とされています。ですから、SEO的な効果を期待して、セクションに関係のないキーワードを見出し要素を用いてマークアップするような使い方は、「目的の妥当性」において「妥当ではない」と言えるでしょう。見出し要素には、最高レベルのh1要素から最低レベルのh6要素まで、6つのレベルがあります。日本語で言えば、h1要素は大見出し、h2要素は中見出し、h3要素は小見出し、と捕らえることができるでしょう。

　さて、見出しの構文的なルールとしては、（「見出しレベルをスキップすることは悪い習慣だと考える人もいる」というような軽い注意はあるものの）途中の見出しレベルを飛ばしても構わないことになっています。つまり、h1要素から始まる必要はありません。さらに、1つの文書に各レベルの見出しが何度出現しても（0回でも）かまわないことになっています。大雑把な言い方をすれば、文書中に見出し要素が無くても、あるいはh6要素の次にh1要素がきても良いということになります。

　このように、W3Cの仕様上では、見出し要素の扱い方について、かなりルーズな決められ方がされているわけですが、W3Cの仕様よりも厳格なマークアップを求めるISO/IEC 15445:2000（ISO-HTML）（注1）では、「途中の見出しレベルを飛ばさないこと」が推奨されています。この規格のユーザーズガイドの中に、「h1要素を根とし～」という記述があるため、h1要素は1度しか使えないようなニュアンスを受けますが、そんなことはなく、W3C同様、「h1要素は何度出現しても（0回でも）問題ない」ということになります。

　まとめると、

• 見出し要素は、そのセクションの話題を簡潔に説明するのに使用する
• 各見出しレベルは、何度出現しても（0回でも）良い
• 途中の見出しレベルを飛ばすことは、W3C（X）HTMLでは可、ISO-HTMLでは不可

　ということになります。

注1：「ISO/IEC 15445:2000（ISO-HTML）」

　ISO（国際標準化機構）とIEC（国際電気標準会議）とが、共同で作成したHTMLの規格。同時にJISの規格でもある（日本工業規格 JIS X 4156:2000）。W3Cの仕様よりも厳格なマークアップを求めるため、これに適合するすべての文書は、W3C勧告にも適合するようになっている。

見出しレベルの階層化

　見出しのマークアップ時の判断を難しくさせる要因は、見出しレベルの構造について、私たちが描くイメージと、プログラム上の解釈が異なる点にあります。私たち人間は、見出しレベルの構造について、h1要素から順に見出しレベルに応じたツリー階層をイメージします。ところがプログラム上では、どの見出しレベルもすべて同じ階層にあり、完全にフラットなものとして認識されます。

図1：人間の認識とプログラムの認識の違い

　見出しレベルの構造について、このような人間とプログラムの認識の差異を埋めるためには、次のサンプルのように、セクション全体をdiv要素で囲む工夫が必要になります。こうすることで、セクション単位で見出しを構造化することが可能になります。

リスト3　セクション単位で見出しを構造化する

<div class="section" id="section1">
  <h1>大見出し</h1>
    <p>・・・</p>
  <div class="subsection" id="section1-1">
    <h2>中見出し</h2>
    <p>・・・</p>
    <div class="subsubsection" id ="section1-1-1">
      <h3>小見出し</h3>
      <p>・・・</p>
    </div>
    <div class="subsubsection" id ="section1-1-2">
      <h3>小見出し</h3>
      <p>・・・</p>
    </div>
  </div>
</div>

　この例では、div要素にid属性やclass属性を付けています。div要素（やspan要素）は、id属性やclass属性と併用することで、文書に構造を付加するための汎用要素です。id属性やclass属性を使用することで、セクション単位でスタイルを定義することも可能になります。スタイル指定の目的でid属性やclass属性を乱用することは避けるべきですが、ここでは、セクション単位で構造化し、見出しの階層化を目的にしている点に注意してください。

XHTML 2.0の「構造化バージョンの見出し要素」

　現在のところ、見出しの階層化については、上記で紹介したようにdiv要素を用いて階層化するしかありませんが、現在草案中のXHTML 2.0（W3C 草案 2006年7月26日）では、見出し要素として、h1～h6要素の他、section要素と共に使用する構造化バージョンのh要素が導入される予定です。次のサンプルコードのように、h要素で見出しを、section要素でその見出しが及ぶ範囲（セクション）をマークアップします。こうすることで、見出しをそのセクションも含めてツリー構造化できるようになるわけです。

リスト4　XHTML 2.0のh要素とsection要素を使用した見出しのマークアップ例

<h>大見出し</h>
<p>・・・</p>
<section>
  <h>中見出し</h>
  <p>・・・</p>
  <section>
    <h>小見出し</h>
    <p>・・・</p>
  </section>
  <section>
    <h>小見出し</h>
    <p>・・・</p>
  </section>
</section>

理想的な見出しの階層

　ここまで見出しをレベルに応じて階層化することについて述べてましたが、Webサイトの設計方針によっては、この階層を維持することができないケースもあります。例えば、トップページのロゴをh1要素で、個別ページのロゴをdiv要素でマークアップし、ページ上部のナビゲーション類にh2要素で見出しをつけているとします。この場合、トップページでは「h1要素、h2要素」という見出しレベルの階層を維持できますが、個別ページでは「div要素、h2要素」といった順番になり、はじめに出現する見出しがh1要素ではなくh2要素になってしまいます。このように途中の見出しレベルを飛ばさざるを得ないという現象は、

• メインのコンテンツより先にナビゲーション類の記述があり、かつ
• それらナビゲーション類のマークアップに見出し要素を使用している

　というケースにおいて生じやすくなります。1つのWebページに情報（コンテンツ）と機能（ナビゲーション）が混在するというのが、Webというメディアの特性ですから、どちらも軽視することはできず、実に悩ましいところでもあります。

　理想的には、ISO-HTMLで要求されているように、h1要素から始まり、途中の見出しレベルを飛ばさないことが求めらますが、前述したように、途中の見出しレベルを飛ばすことに関しては、W3Cの仕様上、まったく問題ありません。Webサイトの設計方針を踏まえたうえで、柔軟に対応すべきでしょう。

　ここで、途中の見出しレベルを飛ばさないための具体策を考えてみましょう。以降で述べる設計方針は、見出しレベルの階層維持だけに注力したものであって、実際のWebサイトの設計方針においては実用的ではないかもしれない点に注意してください（見出し以外にも重要視すべき設計方針があるはずです）。

　次のいずれか、または組み合わせでマークアップする方法が考えられます。

見出しレベルを飛ばさないための設計方針の例

1. メインのコンテンツより後にナビゲーション類を記述する
2. ナビゲーション類のマークアップに見出し要素を使用しない
3. ナビゲーション類もh1要素からレベル順に付ける

　「1」の方法は、次のサンプルコードのように、ナビゲーション類の記述をコンテンツの後に持ってくる方法です。操作性の問題がありますが、スタイルシートを利用して、見かけ上、ナビゲーションを先に掲示することも可能です。ただし、スタイルシートを利用しない場合には、操作性が悪くなりがちですので、最初にナビゲーションにスキップするためのナビゲーションを加えておくと良いでしょう。スタイルシートで「div#hidden-nav { display: none; }」とすることで、通常は非表示に、スタイルシートが適用されない場合には表示されるようになります。

リスト5　メインのコンテンツより後にナビゲーション類を記述した例

<!-- 非表示のスキップナビゲーション  -->
<p id="hidden-nav"><a href="#navi">ナビゲーションへ</a></p>
<!-- コンテンツ -->
<div id="content">
  <h1>大見出し</h1>
  <p>・・・</p>
  <h2>中見出し</h2>
  <p>・・・</p>
</div>
<!-- 以下ナビゲーション -->
<div id="navi">
  <h3>メニュー</h3>
  <ul>
    <li>・・・</li>
    <li>・・・</li>
    <li>・・・</li>
  </ul>
</div>

　「2」の方法は、単純に、ナビゲーション類には見出し要素を使用せず、メインのコンテンツのみに見出しを使用する方法です。重要なナビゲーションにはem要素やstrong要素を利用して構造を示す工夫が必要でしょう。

リスト6　ナビゲーション類のマークアップに見出し要素を使用しない例

<!-- ナビゲーション -->
<div id="navi">
  <em>メニュー</em>
  <ul>
    <li>・・・</li>
    <li>・・・</li>
    <li>・・・</li>
  </ul>
</div>
<!-- コンテンツ -->
<div id="content">
  <h1>大見出し</h1>
  <p>・・・</p>
  <h2>中見出し</h2>
  <p>・・・</p>
</div>

　「3」の方法は、ナビゲーション類もコンテンツも、それぞれh1要素から始めるようにするものです。W3CおよびISO-HTMLでは、h1要素を含む各レベルの見出し要素が、複数回使用しても良いことになっています。つまり、h1要素が2度以上出現することも認められているわけです。しかし、私たち人間の感覚で言うと、h1要素はルート見出しであって、1つのWebページに1つというイメージがありますから、現実的には珍しいケースのマークアップ例かもしれません。このケースでは、同レベルの見出しが2つあるわけですから、記述順序が重要になってきます。SEO的にも、より重要な情報を先に記述することが大切とされていますから、上記1の方法と合わせて、ナビゲーション類を後に記述するほうがよりベターだと言えるでしょう。

リスト7　ナビゲーション類もh1要素からレベル順に付けた例

<!-- コンテンツ -->
<div id="content">
  <h1>大見出し</h1>
  <p>・・・</p>
  <h2>中見出し</h2>
  <p>・・・</p>
</div>
<!-- ナビゲーション -->
<div id="navi">
  <h1>メニュー</h1>
  <ul>
    <li>・・・</li>
    <li>・・・</li>
    <li>・・・</li>
  </ul>
</div>