メールアイコン ご相談はこちらから

h1タグは1ページに1つ？複数あっても大丈夫？【HTML5での正しい使い方】

h1タグは1ページに複数あっても大丈夫？
  1. h1タグは1ページに1つ？それとも複数OK？
  2. HTML5で変わった「h1タグの考え方」
  3. 複数のh1タグがNGなケース
  4. 複数のh1タグがOKなケース（header＋mainなど）
  5. トップページと下層ページでの使い分け方
  6. まとめ：構造を意識すれば複数h1も問題なし

① はじめに

Web制作の現場でよく聞く「h1タグは1ページに1つだけ」というルール。
実はこれはHTML4時代の考え方であり、HTML5以降では少し変わっています。
今回は、複数のh1タグを使っても良いケースと、注意すべきポイントを解説します。

h1タグは1ページに1つ？それとも複数OK？

従来は「h1は1ページに1つだけ」が鉄則でしたが、
HTML5ではページの構造（セクション分け）が明確であれば複数OKです。

HTML5で変わったh1タグの考え方

HTML5では、<header>・<main>・<section>・<article>などのセクショニングコンテンツの中で、
それぞれにh1を持つことが許されています。

つまり、各セクションが独立した文書構造として扱われるようになったということです。

複数のh1タグがNGなケース

以下のように、同じ階層でh1を2つ書くのは避けましょう。

<h1><img src="logo.png" alt="Sober Design"></h1>
<h1>サービス紹介</h1>

このような構造では、検索エンジンやスクリーンリーダーが
「どちらがページの主題なのか」を判断しづらくなります。

複数のh1タグがOKなケース（header＋mainなど）

<header>と<main>で明確に役割が分かれている場合はOKです。
これはHTML5的にも正しい構造です。

<header>
  <h1><img src="logo.png" alt="Sober Design"></h1>
</header>

<main>
  <h1>サービス紹介</h1>
  <p>当社のWeb制作サービスについてご紹介します。</p>
</main>
  • headerのh1 → サイト全体のタイトル
  • mainのh1 → ページ固有のタイトル

このように文脈が分かれていれば問題ありません。

トップページと下層ページでの使い分け方

ページ種類ロゴ部分ページタイトル
トップページh1でOK（別途不要）
下層ページdivやpでOKh1でメイン見出し

下層ページでは、ロゴをdivにしてページタイトルをh1にするのが一般的です。

まとめ

・HTML5では複数のh1タグを使ってもOK（セクションが独立していれば）

・同じ階層内で2つのh1はNG

・header＋mainで使い分けると実務的にもSEO的にも◎

Sober Designでは、SEOを意識したマークアップや構造設計を意識し、
デザインと検索エンジンの両面で最適なWebサイト制作を行っています。