見出しの階層をちゃんとする

Category : XHTML/CSS

previous entry サイトタイトルを画像にしたら | Web標準を目指せ next entry

見出しの階層をちゃんとする

Date 2007-01-07 0 0 Category XHTML/CSS Tags hn, XHTML

見出しの要素h1～h6ってどんなふうに使ってますか。

(X)HTMLには見出しの要素としてh1，h2，h3，h4，h5，h6があります。この見出し，ぼくは今までずいぶんいい加減に使ってました。「この部分はそんな大きな文字じゃなくていいけど，太字にはしたいな。じゃh4ね」とか。見出しの階層とか，出現順にはあまり気をつかっていませんでした。

でも，(X)HTMLを文法的に正しく書くとしたら，見出しの階層・出現順はしっかり考えておくべきだと反省しました。つまり，いちばん大きな見出しh1が最初にあり，次に見出しをつけるならh2。h2の見出しに続く内容の中に，h3の見出しが入り，その内容の中にh4が入る。内容的に並列した同じレベルのものなら，その見出しは同じh3にする。...というふうなことです。文書の構造を正しくはっきりと示すことが大事なんだなあ。

たとえば，サイト全体の見出しh1～h6だけを抜き出して順に並べてみます。見出しがちゃんとつけてあれば，サイトの中身や構成が分かりやすくなるはずです。ぼくらがウェブサイトを閲覧しているときには，大きな文字とか色つきの文字のところを拾い読みしてこういう作業をしているので，h1～h6の要素を使わなくても，フォントの装飾でなんとかなります。でも，これをプログラムで自動的にやらせようとしたら，やっぱりh1～h6の要素に入れておいたほうが効率的です。プログラムって何かと言ったら，サイトに書かれた内容を分析・処理するようなもの。検索エンジンのクローラーなどもそのひとつ。

見出しをちゃんとつけておけば，自動的に目次ができちゃうみたいなことは，ワープロソフトをちょっと使い込んでいる方なら実際にやっているかもしれません。ウェブサイトだって同じことはできるでしょう。閲覧できるいろいろなサイトの(X)HTMLファイルから，見出しをインデックス化することだって不可能じゃありません。

そういうウェブの世界に対応させるってのが，Web標準の考え方です。

ブログの場合，自動的にh1～h3の要素が割り振られるので，あまり深く考えることはないですが，サイトを「１」から作るときにはちゃんと考えておきたいところです。サイト全体の構成って言うんですか。見出しが一覧できる総目次みたいなものをイメージして。ページの中のだけでなく，サイト全体を通した階層の統一性にも気をつけたいと思っています。

見た目のデザインというより，文書の構成・組み立てのデザインになりますか...。