HTML

The h1 to h6 elements in HTML are tags used to indicate headings on a web page, with h1 being the most important and largest, and h6 being the smallest. They are used to convey the hierarchy and importance of headings on the page.

h1～h6 要素

　h1～h6要素はセクションに見出しを付ける際に使用します。この見出し要素には、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>と６種類あります。これらの要素名の数字は、小さいほど高いランクの見出しを表しますので、h1要素が最も高いランクの大見出しとなり、h6要素が最も低いランクの小見出しとなります。同じ数値のものが複数ある場合には同じランクとなります。

h1の１番大きな見出し

h2の２番目に大きな見出し

h3の３番目に大きな見出し

h4の４番目に大きな見出し

h5の５番目に大きな見出し

h6の６番目に大きな見出し

HTML

<h1>h1の１番大きな見出し</h1>
<h2>h2の２番目に大きな見出し</h2>
<h3>h3の３番目に大きな見出し</h3>
<h4>h4の４番目に大きな見出し</h4>
<h5>h5の５番目に大きな見出し</h5>
<h6>h6の６番目に大きな見出し</h6>

h1の１番大きな見出し

h2の２番目に大きな見出し

h3の３番目に大きな見出し

h2の２番目に大きな見出し

h3の３番目に大きな見出し

HTML

<h1>h1の１番大きな見出し</h1>
<h2>h2の２番目に大きな見出し</h2>
<h3>h3の３番目に大きな見出し</h3>
<h3>h3の３番目に大きな見出し</h3>
<h2>h2の２番目に大きな見出し</h2>
<h3>h3の３番目に大きな見出し</h3>
<h3>h3の３番目に大きな見出し</h3>

h1〜h6要素の使い分け

　見出しの使い方にはルールがあります。これを守ることで、読み手が理解しやすく、検索エンジンにも評価されやすい記事を書くことができます。

h1〜h6を使う順番を守る

　基本的に h1の見出しから順番に使っていきます。デザイン的に都合が良いからといきなり h3の見出しを使ったり、h1、h3、h2の順番で使ったりするのは誤りとなります。

h1要素の使用は１回だけにする

　h1要素は最も大きな見出しで、Webページの主題を表すのに一度だけ使うのが理想的です。複数回使用自体が SEO的にマイナス評価になることはないようなのですが、記事のテーマが読み手にも検索エンジンにも伝わりづらくなります。基本的には１ページ（１記事）につき一度だけ使うようにしましょう。

h1要素をどこに使う？

　ページの主題を表すところに使うので、以下のように使い分けるのが良さそうです。

トップページ: ウェブサイトのタイトルに h1 を使う。
各記事ページ: 記事タイトルに h1 を使う。

h2〜h6は何回使ってもOK

　h2以下の見出し要素は何回使ってもOKです。基本的に記事本文では h2〜h6を使うことになります。

見出しとアウトラインについて

　セクショニング・コンテンツに属する要素を使って明示的にセクションがマークアップされていない場合、このランクの高低に応じて、アウトラインが決定されます。次のマークアップは、いずれも、アウトライン上は同じです。

セクショニング・コンテンツ要素を使わない場合

HTML

<body>
	<h1>見出しA</h1>
	<h2>見出しB</h2>
	<h3>見出しC</h3>
	<h2>見出しD</h2>
</body>

セクショニング・コンテンツ要素を使った場合

HTML

<body>
	<h1>見出しA</h1>

	<section>
		<h1>見出しB</h1>
		<section>
			<h1>見出しC</h1>
		</section>
	</section>

	<section>
		<h1>見出しD</h1>
	</section>
</body>

　後者のサンプルでは、全てのセクションで h1要素を使っている点に注目してください。このように、全てのセクションをセクショニング要素を使って明示的にマークアップした場合は、すべて h1要素でマークアップしても、アウトライン・アルゴリズムにおいては、前者のサンプルと同じアウトラインを形成します。

h1～h6 要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」

Heading content 「ヘッディング・コンテンツ：見出しコンテンツ」

Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」

Content model 「コンテンツ･モデル」

Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

利用可能な場所

フロー・コンテンツが期待される場所。hgroup要素は非推奨になったので、見出し要素をその子要素として使用しないでください。

タグの省略

不可。開始と終了タグの両方が必要。

要素固有のコンテンツ属性

なし。グローバル属性のみ。

標準的なスタイル

h1 {
	display: block;
	font-size: 2em;
	margin: .67em 0 .67em 0;
	font-weight: bold;
}

h2 {
	display: block;
	font-size: 1.5em;
	margin: .83em 0 .83em 0;
	font-weight: bold;
}

h3 {
	display: block;
	font-size: 1.17em;
	margin: 1em 0 1em 0;
	font-weight: bold;
}

h4 {
	display: block;
	margin: 1.33em 0 1.33em 0;
	font-weight: bold;
}

h5 {
	display: block;
	font-size: .83em;
	margin: 1.67em 0 1.67em 0;
	font-weight: bold;
}

h6 {
	display: block;
	font-size: .67em;
	margin: 2.33em 0 2.33em 0;
	font-weight: bold;
}

Sample

シンプルなラインの見出し

見出しデザイン

HTML

<h2>見出しデザイン</h2>

CSS

h2 {
	border-bottom: 3px solid #aaa;
	color: #aaa;
}

おしゃれなタグ風見出し

見出しデザイン

HTML

<h2>見出しデザイン</h2>

CSS

.h2 {
	display: inline-block;
	background-color: #ffaf58;
	padding: 0.5em;
	border-radius: 30px 0 0 30px;
	color: #fbfbfa;
	white-space: nowrap; /* 小さな画面対策 */
}

.h2::before {
	content: '●';
	margin-right: 8px;
}