<h1></h1> ～ <h6></h6>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / ヘッディング・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
h1～h6要素は、セクションの見出しを表します。h1に近いほど見出しのランクが高くなり、h6に近いほど低くなります。
- デフォルトスタイル（太字、文字サイズ、上下マージン）
<h1>ランク1の見出し</h1>
<h2>ランク2の見出し</h2>
<h3>ランク3の見出し</h3>
<h4>ランク4の見出し</h4>
<h5>ランク5の見出し</h5>
<h6>ランク6の見出し</h6>
見出しの付け方
HTML5では、見出しの付け方を選べるようになりました。
以下の例のように、階層に合わせたランクを使うか、全ての階層にh1要素を使って見出しを付けることができます。（この2つの方法は、1つの文書内で混在させないようにします）
- 階層に合わせたランクを使う
-
h1 大見出しh2 中見出しh3 小見出しh2 中見出しh3 小見出し
- 全ての階層にh1要素を使う
-
h1 大見出しh1 中見出しh1 小見出しh1 中見出しh1 小見出し
- 後者の全ての階層にh1要素を使うという書き方は、HTML 5.1では使えなくなったようです。
セクションについて
HTML5では、見出しを配置すると暗黙的なセクションが生成されます。
詳しくは下記のページをご覧ください。
要素のデフォルトスタイル
一般的なブラウザでは、この要素内のテキストは太字で表示され、見出しのランクにより文字サイズが変化します。また、この要素の上下にはマージンが入ります。
h1要素の見出しテキスト（サイズ 200%）
h2要素の見出しテキスト（サイズ 150%）
h3要素の見出しテキスト（サイズ 120%）
h4要素の見出しテキスト（サイズ 100%）
h5要素の見出しテキスト（サイズ 80%）
h6要素の見出しテキスト（サイズ 70%）
- 上記の文字サイズの数値は、ひとつの目安としてご覧ください。（ブラウザにより多少異なるかもしれません）
- IE（9以上）、Firefox、Chromeでは、セクションの階層に合わせてh1要素の文字サイズが変化します。（上記の表示例では、CSSの設定で文字サイズを調整しています）
- マージンの大きさは、見出しのランクにより異なります。大まかな数値は、h1：0.7em、h2：0.8em、h3：1em、h4：1.3em、h5：1.7em、h6：2.3em、です。（ブラウザにより多少異なるかもしれません）
- HTML5における変更点
-
- align属性が廃止されました。
- 見出しの付け方を選べるようになりました。
- HTML 5.1における変更点
-
- 入れ子にされたセクション内でのh1要素の使用は、廃止の扱いになったようです。（階層の深さに応じてh2～h6要素を使用する必要があるそうです）
使用例
<article>
<h2>ランク2の見出し</h2>
<p>2階層目の内容</p>
<section>
<h3>ランク3の見出し</h3>
<p>3階層目の内容</p>
</section>
<section>
<h3>ランク3の見出し</h3>
<p>3階層目の内容</p>
<section>
<h4>ランク4の見出し</h4>
<p>4階層目の内容</p>
</section>
<section>
<h4>ランク4の見出し</h4>
<p>4階層目の内容</p>
</section>
<p>3階層目の内容</p>
</section>
<p>2階層目の内容</p>
</article>
- 表示例
-
ランク2の見出し
2階層目の内容
ランク3の見出し
3階層目の内容
ランク3の見出し
3階層目の内容
ランク4の見出し
4階層目の内容
ランク4の見出し
4階層目の内容
3階層目の内容
2階層目の内容
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<h1>文書のタイトル</h1>
<article>
<h1>記事のタイトル</h1>
<section>
<h1>セクションのタイトル</h1>
</section>
</article>
</body>
</html>
- 表示例
- IE（9以上）、Firefox、Chromeでは、セクションの階層に合わせてh1要素の文字サイズが変化します。