h1要素
要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
---|---|---|---|---|---|
h1 | 2.0, 2.x, 3.2, 4.0, X1.0, X1.1 | 必須 | 必須 | %heading; | %inline; |
属性名 | バージョン | 属性値 | 既定値 | 備考 |
---|---|---|---|---|
align | 3.2, (4.0), (X1.0) | (left|center|right|justify) | #IMPLIED | default is left for ltr paragraphs, right for rtl |
共通属性 …… %coreattrs;, %i18n;, %events;
h1の解説
見出しを表す要素です。h は Heading の H で、見出しの意です。h1 の 1 は見出しのレベルを示し、h1, h2, h3, h4, h5, h6 の 6段階あります。h1 は「見出しレベル1」です。レベルの数字の若い方がより上位の見出しということになります。
たとえば、このように使います。
<h1>第一部 光と影</h1>
<div class="chapter">
<h2>第一章 たらこ唇の伝説</h2>
<div class="section">
<h3>第一節</h3>
<p> …… </p>
<p> …… </p>
</div>
<div class="section">
<h3>第二節</h3>
<p> …… </p>
</div>
</div>
<div class="chapter">
<h2>第二章……
ブラウザは見出しを地の文と区別して表現するでしょうし、レベルの若いものがより目立つように表現するでしょう。RFC1866 では以下のような表現法が勧められていました。
- h1 …… 太字、とても大きな文字、センタリング、前後 1~2行空き。
- h2 …… 太字、大きな文字、左端にくっつける、前後 1~2行空き。
- h3 …… イタリック、大きな文字、少しインデント、前後 1~2行空き。
- h4 …… 太字、文字サイズは普通、h3 よりもインデント幅を広く。前後 1行空き。
- h5 …… イタリック、文字サイズは普通、h4 と同じインデント、前だけ 1行空き。
- h6 …… 太字、文字サイズは普通、地の文と同じくらいのインデント (h5 よりインデント幅が広い)、前だけ 1行空き。
しかしながら、多くのブラウザは手抜きをして単に全部を太字にし、しかも、h5 や h6 が見出しなのに地の文より小さいフォントになるという変な表現方法を採用しています。これはスタイルシートが使えれば簡単に変更できますが、スタイルシート無効の環境のことを考えると、h5 や h6 まで使い切る場合は注意が必要かもしれません。
なお、h1 の 1 は見出しのレベルですが、昔はよくこれを文字のサイズであると説明していた本がありました。そのせいか、これを文字サイズ調整の道具として使い、その結果として h1 の次に h3 が出てきたり、いきなり h4 から始まったりするものを見かけることがありました。そのような用法は好ましくありません。文書の構造が分かりにくくなる上、Hn を自動的に抜き出して目次を表示してくれるようなツールを混乱させるおそれがあるからです。たとえば IBM ホームページ・リーダーは「見出し読みモード」というものを備えていて、見出しだけを次々と読んで行くことができます。適切な見出しが付けられていないと、このような機能が非常に利用しづらくなってしまいます。
- 「h1要素」にコメントを書く