Home | 目次 | Prev | 見出し | Next

この節では見出しを囲む見出し要素における、その作法について解説します。意外と知らないうちに文法違反を犯してしまう傾向にある見出し要素ですが、利用する見出しの要素型は、構造的な規則があるということを知ってください。

■ 見出し要素と文字の大きさ

見出し要素のレンダリングは閲覧者が使用するソフトウェアによって異なります。HTMLの仕様書では表示方法については一切触れられておりません。

HTMLでは、「大見出し」、「中見出し」、「小見出し」というように６つの見出し要素が定義されています。

一般的な視覚系ブラウザでは h1 (第一見出し要素) が一番大きく描画されるように設計されています。以下 h2 (第二見出し)、h3 (第三見出し)という順で文字の大きさを一回りずつ小さくさせています。

あなたの環境では、以下の h1～h8 までの要素はどのように見えるでしょうか。

第１見出し要素 h1

第２見出し要素 h2

第３見出し要素 h3

第４見出し要素 h4

第５見出し要素 h5

第６見出し要素 h6

このような文字の大きさの変化に着目して、それぞれの見出し要素を文字の大きさのコントロールとして利用するのは間違いです。見出しはあくまで「見出し」であって決して段落などに利用するものではありません。文字の大きさのコントロールはスタイルシートで行いましょう。

■ 見出し要素の順位

HTMLの文法上、ページの最初に登場する見出しは h1要素です。決して h2や h3要素であってはなりません。つまり、h2 や h3要素はコンテンツの最上位見出しに当たりません。

h2要素は、h1要素の小見出しになり、h3要素は、h2要素の小見出しになります。それぞれの見出し要素の階層を無視する手法は明らかな文法違反です。

h1要素では文字の大きさが大きすぎるので、h3要素を使いたいという気持ちはわかりますが、文字の大きさのコントロールはスタイルシートを使うべきであり、文法を無視することは避けたいところです。

具体的な見出し要素の使い方は、以下の構文のとおりです。

<h1>第１章</h1>
  <h2>1-1節</h2>
    <p>コンテンツ</p>

  <h2>1-2節</h2>
    <p>コンテンツ</p>

     <h3>1-2-1項</h3>
       <p>コンテンツ</p>

<h1>第２章</h1>
  <h2>2-1節</h2>
    <p>コンテンツ</p>

    <h3>2-1-1項</h3>
       <p>コンテンツ</p>

    <h3>2-1-2項</h3>
       <p>コンテンツ</p>

この構文をツリー構造で現した階層は以下のとおりです。

見出し要素のツリー構造をあらわした図版

初版公開日 2004年6月19日　最新更新日 2006年1月12日