h1～h6要素

h1～h6要素は、ドキュメント（文書）やセクションの見出しであることを示す要素。

カテゴリー フロー・コンテンツ。ヘッディング・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

要点

  • h1～h6要素は、ドキュメントやセクションの見出しであることを示す要素である。
  • 数値は、見出しのランクを示している。h1が最高ランクで、数が増すほどランクが下がり、h6が最低ランクである。
  • セクションの階層（深度）に合ったランクの見出し要素（h1～h6要素）を使うか、全ての階層でh1要素を使うかを選択できる。１つのページで、２つの使用法を混在させることはできない。
  • h1～h6要素を配置すると、暗黙的に、新たなセクションを区画する。 HTML5は、明示的にセクションを区画することを推奨しているので、明示的に区画した方が良いだろう。 明示的に区画する場合は、セクショニング・コンテンツであるsection要素、article要素、aside要素、nav要素で括る。

サンプルコード

<h1>見出し</h1>

h1～h6

<h1>見出し１</h1> 
<h2>見出し２</h2> 
<h3>見出し３</h3> 
<h4>見出し４</h4> 
<h5>見出し５</h5> 
<h6>見出し６</h6>

明示的に区画＆階層に合ったランクの見出し要素

セクショニング・コンテンツであるsection要素、article要素、aside要素を使い、セクションを明示的に区画。

HTML5は、明示的に区画することを推奨している。

見出し要素の使用法は、セクションの階層に合ったランクの見出し要素（h1～h6要素）を使う方法。

<body>
	<h1>h1「タイトル」</h1>
	<article>
		<h2>h2「記事見出し」</h2>
		<p>記事の内容。</p>
		<section>
			<h3>h3「セクション見出し」</h3>
			<p>セクションの内容。</p>
			<section>
				<h4>h4「セクション見出し」</h4>
				<p>セクションの内容。</p>
			</section>
		</section>
	</article>
	<aside>
		<h2>h2「サイドバー」</h2>
		<p>サイドバーの内容。</p>
	</aside>
</body>

暗黙的に区画

上記の「明示的に区画」のソースコードからセクショニング・コンテンツを取り除いたもの。

<body>
	<h1>h1「タイトル」</h1>
		<h2>h2「記事見出し」</h2>
		<p>記事の内容。</p>
			<h3>h3「セクション見出し」</h3>
			<p>セクションの内容。</p>
				<h4>h4「セクション見出し」</h4>
				<p>セクションの内容。</p>
		<h2>h2「サイドバー」</h2>
		<p>サイドバーの内容。</p>
</body>

全ての階層でh1要素を使用

見出し要素の使用法は、全ての階層でh1要素を使う方法。

<body>
	<h1>タイトル見出し</h1>
	<article>
		<h1>記事見出し</h1>
		<p>記事の内容。</p>
		<section>
			<h1>セクション見出し</h1>
			<p>セクションの内容。</p>
			<section>
				<h1>セクション見出し</h1>
				<p>セクションの内容。</p>
			</section>
		</section>
	</article>
	<aside>
		<h1>サイドバー</h1>
		<p>サイドバーの内容。</p>
	</aside>
</body>

サンプル

階層に合ったランクの見出し要素を使用

セクションの階層に合ったランクの見出し要素（h1～h6要素）を使う方法。

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<h1>h1「タイトル」</h1>
	<article>
		<h2>h2「記事見出し」</h2>
		<p>記事の内容。</p>
		<section>
			<h3>h3「セクション見出し」</h3>
			<p>セクションの内容。</p>
			<section>
				<h4>h4「セクション見出し」</h4>
				<p>セクションの内容。</p>
			</section>
		</section>
	</article>
	<aside>
		<h2>h2「サイドバー」</h2>
		<p>サイドバーの内容。</p>
	</aside>
</body>
</html>
実際の表示

全ての階層でh1要素を使用

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<h1>タイトル見出し</h1>
	<article>
		<h1>記事見出し</h1>
		<p>記事の内容。</p>
		<section>
			<h1>セクション見出し</h1>
			<p>セクションの内容。</p>
			<section>
				<h1>セクション見出し</h1>
				<p>セクションの内容。</p>
			</section>
		</section>
	</article>
	<aside>
		<h1>サイドバー</h1>
		<p>サイドバーの内容。</p>
	</aside>
</body>
</html>
実際の表示