<h1> 〜 <h6>

対応:		HTML 4（1997）

『<h1>』〜『<h6>』は文書の見出しを表すタグです。数字が小さいほど重要度が高く、『<h1>』がページの最も重要な見出し、『<h6>』が最も下位の見出しになります。ブラウザはデフォルトで数字が大きくなるにつれて小さいフォントサイズで表示します。

構文

<h1>最も重要な見出し（ページタイトル）</h1>
<h2>章の見出し</h2>
<h3>節の見出し</h3>
<h4>小節の見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最も小さい見出し</h6>

タグ一覧

タグ	概要
<h1>	ページの最も重要な見出しです。通常、ページタイトルに使用します。1ページに1つが推奨されています。
<h2>	章レベルの見出しです。ページ内の主要なセクションの見出しに使用します。
<h3>	節レベルの見出しです。h2のセクション内のサブセクションに使用します。
<h4>	小節レベルの見出しです。h3のさらに下位のまとまりに使用します。
<h5>	より細かいまとまりの見出しです。実際のWebサイトではあまり使用されません。
<h6>	最も下位の見出しです。実際のWebサイトではほとんど使用されません。

サンプルコード

sample_h1_h6.html

<!-- h1〜h3を使った典型的な記事の見出し階層 -->
<article>
  <!-- h1はページに1つ。ページの主題を表します -->
  <h1>JavaScriptの基礎</h1>

  <!-- h2は章の見出し -->
  <h2>変数と型</h2>
  <p>JavaScriptでは『let』や『const』を使って変数を宣言します。</p>

  <h3>文字列型</h3>
  <p>シングルクォートまたはダブルクォートで囲みます。</p>

  <h3>数値型</h3>
  <p>整数・小数を区別なく扱います。</p>

  <!-- 次のh2セクション -->
  <h2>制御構文</h2>
  <p>条件分岐や繰り返し処理について学びます。</p>

  <h3>if文</h3>
  <p>条件に応じて処理を分岐させます。</p>
</article>

<!-- h1〜h6のデフォルト表示（大きさの確認用） -->
<h1>h1 — ページのメインタイトル</h1>
<h2>h2 — 章の見出し</h2>
<h3>h3 — 節の見出し</h3>
<h4>h4 — 小節の見出し</h4>
<h5>h5 — さらに小さい見出し</h5>
<h6>h6 — 最も小さい見出し</h6>

<!-- サイト全体のh1とセクションのh2を使い分ける例 -->
<body>
  <header>
    <!-- サイト名をh1に -->
    <h1>プログラミング学習サイト</h1>
  </header>
  <main>
    <!-- 各セクションはh2から始める -->
    <section>
      <h2>HTML入門</h2>
      <p>HTMLでWebページの構造を作る方法を学びます。</p>
    </section>
    <section>
      <h2>CSS入門</h2>
      <p>CSSでWebページを装飾する方法を学びます。</p>
    </section>
  </main>
</body>

実行結果

ブラウザは各見出しタグを階層構造として解釈し、『<h1>』が最も大きく太いフォントで表示され、数字が増えるにつれて小さいフォントで表示されます。見出しの前後には自動的に余白が入ります。

サンプルページはこちら

概要

見出しタグは文書の階層構造（アウトライン）を作るためのものです。見た目を大きくしたいからといってh1を使ったり、フォントサイズを小さくしたいからh4を使ったりするのは誤った使い方です。見た目のサイズはCSSで調整し、タグは意味・役割に応じて選択してください。

『<h1>』は1ページに1つ使うことが推奨されています。検索エンジン（SEO）はh1をページの主題として解釈するため、ページの内容を端的に表すテキストをh1に設定することが重要です。

見出しのレベルはスキップしないようにしましょう。たとえば『<h1>』の次に『<h3>』を使うのは避け、『<h1>』→『<h2>』→『<h3>』の順番に使ってください。スクリーンリーダーのユーザーは見出しタグをナビゲーションに使うため、見出しの構造はアクセシビリティにも大きく影響します。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

CSSによるスタイリング

ブラウザは各見出しタグにデフォルトのフォントサイズを設定しています。以下はChrome/Firefoxでのデフォルト値です。

タグ	デフォルトサイズ（px）	em換算	font-weight
<h1>	32px	2em	bold
<h2>	24px	1.5em	bold
<h3>	18.72px	1.17em	bold
<h4>	16px	1em	bold
<h5>	13.28px	0.83em	bold
<h6>	10.72px	0.67em	bold

実務ではデフォルトスタイルをリセットし、デザインシステムに合わせて統一的に定義するのが一般的です。

/* 見出しのデフォルトスタイルをリセットしてカスタマイズ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.3;
}

h1 {
  font-size: 2rem;    /* 32px（ベースフォントサイズ16pxの場合） */
  color: #1a1a1a;
}

h2 {
  font-size: 1.5rem;  /* 24px */
  color: #333;
  border-bottom: 2px solid #4488ff; /* 区切り線 */
  padding-bottom: 0.25em;
}

h3 {
  font-size: 1.25rem; /* 20px */
  color: #444;
}

SEOとh1の重要性

検索エンジン（Googleなど）は、ページの『<h1>』をページの主題を表すテキストとして重く評価します。適切な『<h1>』の設定がSEOに直結します。

項目	推奨される使い方
h1の個数	1ページに1つが推奨。複数のh1はSEO評価を分散させる可能性がある
h1のテキスト	ページの主テーマを端的に表すキーワードを含める。titleタグと一致または近い内容が望ましい
見出し階層	h1→h2→h3の順を守る。スキップ（h1→h3）はスクリーンリーダーのナビゲーションを壊す
キーワード詰め込み	過剰なキーワード詰め込みはスパムと判断されるため避ける

<!-- 良い例: ページ主題を明確に表すh1 -->
<h1>JavaScriptのasync/awaitの使い方【サンプルコード付き】</h1>

<!-- 悪い例: キーワードを詰め込んだh1 -->
<h1>JavaScript async await 非同期 Promise then 使い方 入門 初心者</h1>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<h1> 〜 <h6>

構文

タグ一覧

サンプルコード

sample_h1_h6.html

実行結果

概要

対応ブラウザ

CSSによるスタイリング

SEOとh1の重要性