はじめに

HTMLを学び始めると必ず登場する「hタグ（見出し要素）」。
簡単そうに思えますが、その使い方や仕様に関しては注意すべきポイントがいくつかあります。
今回はhタグに関わるあれこれについて、いつでも振り返られるようまとめてみました。

「hタグって何？」
「h1って何個も使っていいの？」
「h2を飛ばしてh3を使ってもいいんだっけ...？」

こんな疑問が浮かんだら、この記事をチェックしてみてください！

hタグとは？

hタグは、HTMLで見出しを設定するための要素です
h1からh6までの6種類があり、番号が小さいほど重要な見出しになります。
適切に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>

１.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タグはHTMLの中でページの構造を整理し、コンテンツを階層的に配置するための重要な要素です。
hタグを正しく活用し、より質の高いサイトを目指していきましょう！