はじめに
HTMLを学び始めると必ず登場する「hタグ（見出し要素）」。
簡単そうに思えますが、その使い方や仕様に関しては注意すべきポイントがいくつかあります。
今回はhタグに関わるあれこれについて、いつでも振り返られるようまとめてみました。
「hタグって何？ 
」
「h1って何個も使っていいの？ 
」
「h2を飛ばしてh3を使ってもいいんだっけ...？ 
」
こんな疑問が浮かんだら、この記事をチェックしてみてください！
hタグとは？
hタグは、HTMLで見出しを設定するための要素です
h1からh6までの6種類があり、番号が小さいほど重要な見出しになります。
適切にhタグを設定することで、ページの構造が視覚的にも論理的にも整理され、ユーザーや検索エンジンにとって分かりやすいページを作成できます。
hタグの使い方
基本的な記述方法
記述例は以下の通りです。
hタグには閉じタグが必須となります
<h1>ページのタイトル</h1>
<h2>セクションのタイトル</h2>
<h3>サブセクションのタイトル</h3>
画像にも設定できる
hタグを画像に設定することもできます
この場合、alt属性を必ず設定し、視覚障害者や検索エンジンに向けた情報を提供することが重要です。
<h2><img src="image.jpg" alt="見出し画像"></h2>
デザイン調整のために使わない
デザイン調整のためにhタグを使用することはNGです
デザイン調整にはCSSを使い、hタグはあくまで見出しとしての役割に徹しましょう。
順序と階層
hタグは、「h1 → h2 → h3...」のように順番通りに設定し、見出しのレベルを飛ばして使用しないようにしましょう。また、階層構造を意識して配置します。
OK例：
<h1>メインタイトル</h1>
<h2>セクション1</h2>
<h3>サブセクション1</h3>
NG例：
<h1>メインタイトル</h1>
<h3>サブセクション1</h3>
HTMLの仕様上、見出しレベルをスキップして使用しても、表示されなくなるほどの致命的なエラーが発生するわけではありません。しかし以下の2点を踏まえて、見出しレベルは順番通りに使用すべきと考えます
「HeadingsMap」などの拡張機能を使用すると、階層構造のチェックも簡単です。
１.MDN
MDN の見出し要素ページの使用上の注意では、以下のように述べられています。
見出しレベルを飛ばさないでください。常に <h1> から始め、次に <h2>、以下も同様にしてください。
２.アクセシビリティ
スクリーンリーダーを利用するユーザーにとって、hタグを適切に設定することでページのナビゲーションが容易になります。webアクセシビリティのガイドラインであるWCAGも「G141: 見出しを用いてウェブページを構造化する」にて、以下のように述べています。
文書の全体的構造のナビゲーション及び理解を助けるには、コンテンツ制作者は適切に入れ子にした見出しを使用すべきである (たとえば h1 には h2 が続き、h2 には h2 か h3 が続き、h3 には h3 または h4 が続き……といったように)。
設定できる個数
-
h1は何個設定できるか？
1ページあたり1個にすべきだと考えます
複数設定すること自体は技術的に可能ですが、MDN には「1つのページに複数の <h1> 要素を使用しない」と述べられています。 -
h2～h6は何個設定できるか？
必要に応じて何個でも使用してOKです
SEO観点からのメモ
SEO対策のために「h○は○○個設定したほうがいい！」といった意見を見かけます。
Googleとしては「見出しの数や順序」について以下のように述べており、h1タグの複数使用等は検索順位に影響しないようです。
見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。
～略～
また、ページごとに魔法の見出し数や理想的な見出し数といったものが存在することもありません。
各hタグの役割とイメージ
これは何タグを設定すべきだ？と迷ったら、一冊の本をイメージしてhタグを考えてみましょう！
-
h1：本のタイトル
サイト全体の主題を表します。一冊の本にタイトルが1つであるように、h1は1ページに1個だけ設定するのが望ましいです。 -
h2：本の章
コンテンツの主要セクションを示します。h1の内容を分かりやすく整理するためのサポート役として機能します。 -
h3：本の節（セクション内の小見出し）
h2の内容を細かく分ける役割を持ちます。h3を適切に使うことで、情報の階層を明確にし、読み手の理解を助けます。 -
h4〜h6：細分化されたセクション
h3以下の詳細な区分を作るために使用します。h4以降は、より詳細な内容を整理するのに適しています。
おわりに
hタグはHTMLの中でページの構造を整理し、コンテンツを階層的に配置するための重要な要素です。
hタグを正しく活用し、より質の高いサイトを目指していきましょう！