CYBER@GARDEN

home > Web::Blogoscope > 見出し構造の理想と現実

Web::Blogoscope

見出し構造の理想と現実

見出し（h1～h6要素）をどう適切に構造化するかは、これまでもわりと議論されてきた。W3C仕様書はいずれも言葉足らずなので、ISO-HTML（ISO/IEC 15445:2000）とそのユーザーズガイド（User's Guide to ISO/IEC 15445:2000）がよく引き合いに出される。

現状での理想的な見出し構造

拙著『Web標準の教科書』にも書いたが、ISO-HTMLの見出しに関する要件は、

の2点にまとめることができる。つまり、

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h3>小見出し</h3>

というように、h1要素からはじまり、h2要素、h3要素、それ以下、という階層構造が理想的ということになる。なお、後述のXHTML 2.0にも、途中のレベルの見出しを飛ばすのはよくない（bad practice）という説明が加えられている。

ここで「理想的」と書いたのは、ページ構成によってはいくつかの見出し要素を使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならないページもありうるからだ。

CSSをうまく利用してこれらの問題を避けることもできるが（たとえばdisplayプロパティを利用する）、必ずしも一定レベル以上のCSSテクニックを習得していないケースもある。

見出しが及ぶ範囲のわかりにくさ

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

私たち人間であれば、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>

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

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

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

一方、h1要素の「ルート見出し」としての性格を重んじれば、1つのページには1つのh1要素だけ、という考えになるだろう。私もどちらかというとこのタイプだ。h1要素の範囲ごとに複数のページにわけたり、見出しレベルの割り当て方を変えるといった方法で、1ページ1ルート見出しというルールを守ったほうがよいと考えている。

XHTML 2.0では、これまでの仕様と同様、書式上で1ページ1ルート見出しという制約が課されているわけではない。ただ、h1～h6要素も引き続き利用できるため、h1要素と最上位のh要素の役割がバッティングするのでは、という新たな疑問もある。

Posted on 2005-11-14T17:00+09:00 | Category: Web標準

トラックバックPings

トラックバックのURI:
http://www.cybergarden.net/mt/mt-tb.cgi/248

» [Clip] Google Analyticsのビジネスモデル、BtoBサイトでAjax、OSSのデュアルライセンス戦略 from アークウェブ ビジネスブログ
中野です。11月15日のクリップです。 CNET Japan Blog - 渡辺... [Read More]

Tracked on 2005-11-15T15:21+09:00

コメント

« ほったらかし温泉 | ブログトップ | カニ占い »