XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。

ふたたび、見出しの話

 Webページにとって、見出しは「骨格」にあたる。第16回で書いたとおり、W3C仕様では見出しの使い方がそれほど厳格に決められていないため、ISO-HTML(ISO/IEC 15445:2000)の考え方を参考にするとよい。ISO-HTMLの見出しに関する要件は、次の2点にまとめられる。

  • h1要素からはじめること
  • 途中の見出しレベルを飛ばさないこと

 つまり、h1要素からはじまり、h2要素、h3要素、それ以下、という階層構造が理想的ということになる。ここで「理想的」と書いたのは、サイトの設計方針によっては途中の見出しレベルを使うことが難しかったり、サイト全体で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならないページもありうるからだ。

 たとえば、Dreamweaverなどのオーサリングツールでテンプレートを入念に作成し、運用していく場合、多くのページでh1要素、h2要素、h3要素、h4要素という階層構造が実現できても、一部の特殊なページではh1要素、h3要素、h4要素と、h2要素を飛ばして構成しなければならないこともありうる。

 また、ホームのロゴはh1要素で、個別ページのロゴはp要素でマークアップし、ページ上部のナビゲーション類にはh2要素で見出しをつけている場合、ホームは「h1要素、h2要素、ul要素、h2要素、p要素」といった順番で見出しの階層構造を崩さずにマークアップできるが、個別ページは「p要素、h2要素、ul要素、h1要素、p要素」といった順番で、はじめに出現する見出しがh1要素ではなくh2要素になる。

 このように、見出しはそれら自体のマークアップだけでなく、ページ全体の情報構造をどのように設計するかという問題とあいまって、いろいろと悩ましいところがある。

見出しに関する仕様設計上の欠点

 そもそも理想的な階層構造であっても、それぞれの見出しが及ぶ範囲が分かりにくいという仕様設計上の欠点は乗り越えられない。

 私たち人間であれば、h1要素、h2要素、h3要素という順序をツリー構造として頭に思い描くことができる。しかし、ソース上はどの見出しレベルも完全にフラットな関係だ。

人間の認識
人間の認識
ソース上の構造
ソース上の構造

 人間とマシンの認識のミスマッチといえるし、それぞれの見出しに対してツリー構造をもとに演繹的に役割を付与できないという実際的な問題もある。とにかく、見出しレベルを決定する際は「人間の認識」のもとに行うが、実際のマークアップはフラットに行わざるをえない。

将来の見出し構造

 XHTML 2.0(現在、草案)では、h1~h6要素のほかに、h要素とsection要素が導入予定だ。これら2つの要素を入れ子にすることで見出しを階層化できる。

<h>大見出し</h>
<section>
<h>中見出し</h>
<section>
<h>小見出し</h>
<h>小見出し</h>
<h>小見出し</h>
</section>
</section>
<section>
<h>中見出し</h>
<section>
<h>小見出し</h>
<h>小見出し</h>
<h>小見出し</h>
</section>
</section>
XHTML 2.0での見出しのマークアップ(h要素とsection要素を利用)

 このように、h要素で見出しを、section要素でその見出しが及ぶ範囲をマークアップすることになる。見出しをその範囲も含めてツリー構造化できるわけだ。

忘れられた問題: h1要素は複数出現してよいか

 1つのページでh1要素が複数出現しても書式上は全く問題がない。XHTML 2.0は「The series h1 h2 h1 is acceptable」という例を出しているぐらいだ。

 一方、h1要素の「ルート見出し」としての性格を重んじれば、1つのページには1つのh1要素だけ、という考えになるだろう。個人的にも、この方法のほうが妥当だと考える。h1要素の範囲ごとに複数のページに分けたり、見出しレベルの割り当て方を変えるといった方法で、1ページ1ルート見出しというルールを守ることができる。