XHTMLとCSSで文字情報とそのスタイルを表示する方法、つまりページを作る方法が、前回までで把握できたと思う。次は文字情報を伝達するために不可欠な書式の与え方について確認していこう。書式は文書構造を目に見える形で分かりやすく整える方法である。Webページでは正しくタグを使うことが適切な書式をデータに与えることにつながる。

タグの種類は全部で6つ

 雑誌でも新聞でも「読み物」は、大見出しや小見出しの関係でおおよその中身の構造がわかるように作られている。Webサイト作りでも見出しの使い分けが重要なポイントになる。HTMLの見出しタグはレベル1から6までの6つだ。文字の大きさで中身のレベルが分かるように作られており、マークアップしたテキストはそれぞれ図のようにレンダリングされる【図1】。

【図1】 見出しタグでマークアップしたテキストをブラウザで表示した結果。h1はデフォルトの文字サイズの2倍程度の大きさになる。仮にデフォルトの本文テキストサイズが16pt相当だと、その倍なので32pt程度のサイズだ。逆にh6はデフォルトサイズの6割程度なのでデフォルトが16ptの時10ptほどの解釈になる

サンプルページ
headtag.html
(サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。)

 レンダリング結果だけ見ると、見出しタグは「文字を大きくするための指定」のように思えるかもしれないがそれは間違い。HTMLタグは「文書構造を示すため」の道具であり、れっきとした「望ましい使い方」があるので、まずそれを押さえたい。

 最上位レベルのh1タグは、あるページに出てくる唯一の見出しにしか付けられないタグである。例えば、ある雑誌のオンライン版を作成するとしよう。その際特集記事のページでは特集のタイトルが大見出しのh1でタグ付けするにふさわしい内容と言える。まとまった内容量のある特集はいくつかの記事の集まりで構成しているものだが、各記事のタイトルに相当する見出しにはh2を与えるのが妥当だ。そして各記事の本文中に出てくる中見出しがh3ということになる。この関係を図で整理すると【図2】のようになるだろう。

【図2】 見出しタグの一般的な構造。各タグが階層構造を形成している

大見出し(h1)はページごとに1つだけ

 前述の例で考えた場合、h1でタグ付け可能な大見出しは、HTML文書1つに1つしかあり得ないことになる。h1以下のh2のセット、つまり、中見出しを抱えたトピックのユニットは複数登場しても構造的には正しいが、特集のタイトルが1ページに2つある構造というのはありえない。雑誌で言えば、ページの上と下に異なる特集記事を併記しているような状態になってしまう!それは随分変わった媒体だ・・。

 文字情報に対するスタンダードな見出しタグの与え方を示したサンプルページを見てほしい。

サンプルページ
head.html
(サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。)

 このページには2つの中見出しを持つユニットを2つ並列して紹介している。これらがh1でタグ付けした大見出しの下にぶら下がっている状態である。見出し要素以外のリードや本文といった要素はすべて段落(パラグラフ)タグである

でマークアップしている。

 タグの出現数の問題だけにフォーカスすると、h1は1つだけ、それ以外は何度登場しても構造的にはおかしくない。というわけ。また、h3以下のタグが必要なほど複雑な構造の文書はあまりなく、一般的にはh3までのバリエーションで用が足りてしまう。