【HTML5】見出しタグの違いと使い方とは？

コーディング

ページを作成していく中でサイトの名前や見出しとして使われるhタグ。
h1タグはSEO対策としても重要と言われているため、使う頻度も高いと思いますが、それ以外のh2〜h6にはどんな意味があるのかわからない、どのように使うべきタグなのかわからないという方も多いと思います。

今回はそもそもhタグとはどのようなものなのかという基礎的なことから正しい使い方までご紹介いたします！

hタグとは？

まず、hタグとは何かというと、英語で見出しを意味する「Heading」を略して作られたタグで、英語の意味通り見出しをマークアップするために使用するタグです。
タグの種類はh1タグからh6タグまでの6種類があり、数字の小さいh1から使用していきます。
h1タグから使用しそのページに必要な数の見出しタグが適切に使われていると、ユーザーや検索エンジンに正しくページの内容を伝えることができるため、検索エンジンからのページの評価も受けやすくなりSEO対策にも繋がります。

重要と言われるh1タグとは？

hタグの中でもh1タグは特に重要なタグで、大見出しと呼ばれています。
基本的にh1タグはページのタイトルやトップページの場合はロゴなどそのページのタイトルとなる部分に使用します。
ページのタイトルとなる部分に使用することから、複数回使用してしまうとユーザーや検索エンジンがどれがこのページのタイトルか分からなくなってしまうため、1ページ（1つのHTMLファイル）につき1回だけ使うことをお勧めいたします！
また、h1タグに画像を使用すること自体は問題ありませんが、必ずimgタグのalt属性を設定しないとタイトルなど重要な内容がないと認識されてしまいます。
そのため、画像を使用する場合はalt属性がきちんと設定されているか確認をすることが大切です！

h1〜h6タグの使い方

ここからはh1〜h6タグを実際にどのように使用したら良いかをご紹介していきたいと思います。

そのまま書いた場合の見え方

reset.cssなどでスタイルを設定しないデフォルトの状態で各hタグを設置すると次の状態になります。
※ブラウザによって見え方は異なります。

See the Pen bGgxYKM by spiqa design (@spiqa_design) on CodePen.

このように、h1が一番大きく、h6までいく間に徐々に大きさが小さくなっていきます。
使う機会は少ないと思いますが、h5やh6までいくと通常の文章として使われるpタグよりも小さくなってしまうため、スタイルをきちんと当てて使用することが大切です。

h2以下のタグの書き方

デフォルトの状態では大きさが違うため、使いたい大きさに合わせて使う、見出しの種類として使うと誤解されてしまう機会が多いですが、その使い方はどちらも間違っています。
本の目次に例えて考えるとわかりやすいのですが、h1を本のタイトルとするとその次に大きなくくりの第一部のタイトルがh2、第一部の中の第一章のタイトルがh3…とh2の中の内容の見出しはh3、h3のさらに中の内容の見出しはh4と続いていきます。
こちらの考え方を元に、この記事をマークアップすると下記のようになります。

<!-- 【記事のタイトル】 -->
<h1>【HTML5】見出しタグの違いと使い方とは？</h1>
<p>ページを作成していく中でサイトの名前や見出しとして使われるhタグ...</p>

<!-- 【第一部】 -->
<h2>hタグとは？</h2>
<p>まず、hタグとは何かというと、英語で見出しを意味する「Heading」を略して作られたタグで、英語の意味通り見出しをマークアップするために使用するタグです...</p>

<!-- 【第一部 第一章】 -->
<h3>重要と言われるh1タグとは？</h3>
<p>hタグの中でもh1タグは特に重要なタグで、大見出しと呼ばれています...</p>

<!-- 【第二部】 -->
<h2>h1〜h6タグの使い方</h2>
<p>ここからはh1〜h6タグを実際にどのように使用したら良いかをご紹介していきたいと思います...</p>

<!-- 【第二部 第一章】 -->
<h3>そのまま書いた場合の見え方</h3>
<p>デフォルトの状態では大きさが違うため、使いたい大きさに合わせて使う、見出しの種類として使うと誤解されてしまう機会が多いですが、その使い方はどちらも間違っています...</p>

<!-- 【第二部 第二章】 -->
<h3>h2以下のタグの書き方</h3>
<p>デフォルトの状態では大きさが違うため、使いたい大きさに合わせて使う、見出しの種類として使うと誤解されてしまう機会が多いですが、その使い方はどちらも間違っています...</p>

見出しごとのコンテンツを囲むためのsectionタグ

このマークアップでも問題はないのですが、このままではどれがどのコンテンツなのか、どのh2の中のh3なのかというのが少しわかりにくいと思います。
そこで出てくるのがsectionタグです。

【HTML5】見出しタグの違いと使い方とは？

詳しい使い方は別の記事でご紹介しているため今回は省略させていただきますが、先ほどの例をきちんとsectionタグで囲むと次のようになります。
各見出しのコンテンツの内容がどれなのかがわかりやすくなったと思います！

<!-- 【記事のタイトル】 -->
<h1>【HTML5】見出しタグの違いと使い方とは？</h1>
<p>ページを作成していく中でサイトの名前や見出しとして使われるhタグ...</p>

<!-- 【第一部のコンテンツ】 -->
<section>
	<!-- 【第一部】 -->
	<h2>hタグとは？</h2>
	<p>まず、hタグとは何かというと、英語で見出しを意味する「Heading」を略して作られたタグで、英語の意味通り見出しをマークアップするために使用するタグです...</p>

	<!-- 【第一部 第一章のコンテンツ】 -->
	<section>
		<!-- 【第一部 第一章】 -->
		<h3>重要と言われるh1タグとは？</h3>
		<p>hタグの中でもh1タグは特に重要なタグで、大見出しと呼ばれています...</p>
	</section>
</section>
<!-- 【第一部のコンテンツはここまで】 -->


<!-- 【第二部のコンテンツ】 -->
<section>
	<!-- 【第二部】 -->
	<h2>h1〜h6タグの使い方</h2>
	<p>ここからはh1〜h6タグを実際にどのように使用したら良いかをご紹介していきたいと思います...</p>

	<!-- 【第二部 第一章のコンテンツ】 -->
	<section>
		<!-- 【第二部 第一章】 -->
		<h3>そのまま書いた場合の見え方</h3>
		<p>デフォルトの状態では大きさが違うため、使いたい大きさに合わせて使う、見出しの種類として使うと誤解されてしまう機会が多いですが、その使い方はどちらも間違っています...</p>
	</section>

	<!-- 【第二部 第二章のコンテンツ】 -->
	<section>
		<!-- 【第二部 第二章】 -->
		<h3>h2以下のタグの書き方</h3>
		<p>デフォルトの状態では大きさが違うため、使いたい大きさに合わせて使う、見出しの種類として使うと誤解されてしまう機会が多いですが、その使い方はどちらも間違っています...</p>
	</section>
</section>
<!-- 【第二部のコンテンツはここまで】 -->

hタグを使うときの注意点

ここまでの例のように、hタグを本の目次と同じと考えると、h2の次にh4が来たり、h2がないのにいきなりh3から始まってしまうと見出しが抜けた変な目次になってしまいます。
その状態ではページの見た目ではなくタグの内容でコンテンツの内容を判断する検索エンジンから見るとよくわからないページとなってしまいます。
そのため、きちんとh2から順番に使用していくことで検索エンジンにも内容がきちんと伝えることができ、正しくコンテンツが伝わることでページが評価されてSEO対策へと繋がっていきます。