【html】見出しタグの使い方：h1~h6の使い分けとデザイン例

2026年3月21日

HTMLの見出しタグ（h1〜h6）は、検索エンジンとユーザーの双方にページの構造を正しく伝える要素です。

本記事では、SEO効果を高める階層ルールから読者の可読性を上げるデザインの考え方を解説します。

HTML&CSS | Code Stock

HTMLの見出しタグとは

HTMLの見出しタグ（<h1>〜<h6>）は、Webページ内の文章構造や階層をブラウザ及び検索エンジンに正しく伝える要素です。

数字が小さいほど上位の見出しとして扱われます。

SEO（検索エンジン最適化）において、ページ内容をクローラーに正確に理解させる核になるタグです。

仕様を誤解したまま使用すると逆効果になるため、以下に見出しタグの基本ルールと実務での注意点を解説します。

HMTLの見出しタグ

HTMLコードの見出しタグ例
見出しタグ（h1〜h6）のルールとSEOにおける役割
文字を強調する目的で見出しタグを使用しない
NG例：見出しの階層（順番）を飛ばして配置する

HTMLコードの見出しタグ例

見出しタグは、<h1>、<h2>、<h3>…というように合計で6種類です。

以下のように、数字が小さいほど大きな見出しを表します。

見出し（hタグ）

<h1>◯◯</h1>：１番目に大きな見出し
<h2>◯◯</h2>：２番目に大きな見出し
<h3>◯◯</h3>：３番目に大きな見出し
<h4>◯◯</h4>：４番目に大きな見出し
<h5>◯◯</h5>：５番目に大きな見出し
<h6>◯◯</h6>：６番目に大きな見出し

タグの間に記載される文言が見出しになります。

HTMLコード表示

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>

上記は見出しタグに対してCSSでデザインを施していません。

ただ、ブラウザが見出しタグを認識して重要なhタグごとに大きさを調整しています。

ブラウザ表示からも重要なタグであるほどSEOの役割として大きい見出しタグほど強調されていることが分かります。

見出しタグ（h1〜h6）のルールとSEOにおける役割

見出しタグは、例えば書籍における「本のタイトル（h1）」「章（h2）」「節（h3）」に相当します。

検索エンジンはhタグを読み取り、ページにどんなテーマが書かれているかを判断します。

単なるテキスト（<div>や<p>タグ）の文字を強調しただけの状態と見出しタグを用いた状態ではSEOの評価基準が異なります。

単なるテキスト (構造なし) 見出しタグを使用 (構造あり)

サービスの特長

1. 圧倒的なスピード

当社のサービスは業界最速の処理を実現しています。

サービスの特長

1. 圧倒的なスピード

当社のサービスは業界最速の処理を実現しています。

確認すると分かりますが、表示として見出しタグを利用しても変化はありません。

ただし、HTML構造上ではSEOの役割を担う検索エンジンが重要タグと本文を適切に判断するために重要な書き分けになります。

文字を強調する目的で見出しタグを使用しない

見出しタグはあくまで「文書の構造（目次）」を定義するものです。

見出しではない強調テキストに<h>タグを使用すると、検索エンジンが文書構造を誤認し、SEO評価に悪影響を及ぼす可能性があります。

文字の大きさや太さを変更したい場合は、CSSのfont-sizeやfont-weightプロパティを使用してください。

見出しタグで強調 (NG) CSSで強調 (OK)

使用タグ: <h3> （構造的エラー）

使用タグ: <p> ＋ CSS （正しい設計）

※期間限定キャンペーン実施中！

HTMLコード表示

<div class="hhead2-wrapper">
  <input type="radio" name="hhead2-state" id="hhead2-bad" class="hhead2-radio" checked>
  <input type="radio" name="hhead2-state" id="hhead2-good" class="hhead2-radio">

  <div class="hhead2-controls">
    <label for="hhead2-bad" class="hhead2-btn">見出しタグで強調 (NG)</label>
    <label for="hhead2-good" class="hhead2-btn">CSSで強調 (OK)</label>
  </div>

  <div class="hhead2-demo-area">
    <div class="hhead2-box">
      <div class="hhead2-tag-label target-label-bad-hhead2">使用タグ: <h3> （構造的エラー）</div>
      <div class="hhead2-tag-label target-label-good-hhead2">使用タグ: <p> ＋ CSS （正しい設計）</div>
      
      <div class="hhead2-content target-bad-hhead2">
        <h3>※期間限定キャンペーン実施中！</h3>
      </div>
      <div class="hhead2-content target-good-hhead2">
        <p class="hhead2-emphasis">※期間限定キャンペーン実施中！</p>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hhead2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hhead2-radio {
  display: none;
}

.hhead2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hhead2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hhead2-bad:checked ~ .hhead2-controls [for="hhead2-bad"] {
  background-color: #dc3545;
  color: white;
}

#hhead2-good:checked ~ .hhead2-controls [for="hhead2-good"] {
  background-color: #198754;
  color: white;
}

.hhead2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hhead2-box {
  width: 100%;
  max-width: 350px;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.hhead2-tag-label {
  font-size: 12px;
  font-family: monospace;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.target-label-bad-hhead2 {
  background-color: #f8d7da;
  color: #842029;
}

.target-label-good-hhead2 {
  background-color: #d1e7dd;
  color: #0f5132;
  display: none;
}

/* ❌ NG：h3タグのデフォルトスタイルをそのまま利用している */
.target-bad-hhead2 h3 {
  color: #dc3545;
  margin: 0;
  font-size: 18px; /* デモ用にサイズ調整 */
}

/* ⭕️ OK：pタグに対してCSSクラスで装飾を行っている */
.hhead2-emphasis {
  color: #dc3545;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

/* 切り替え処理 */
.target-good-hhead2 {
  display: none;
}

#hhead2-good:checked ~ .hhead2-demo-area .target-label-bad-hhead2 {
  display: none;
}

#hhead2-good:checked ~ .hhead2-demo-area .target-label-good-hhead2 {
  display: inline-block;
}

#hhead2-good:checked ~ .hhead2-demo-area .target-bad-hhead2 {
  display: none;
}

#hhead2-good:checked ~ .hhead2-demo-area .target-good-hhead2 {
  display: block;
}

NG例：見出しの階層（順番）を飛ばして配置する

CSSの知識が不足してると、<h3>のデザインより<h4>のデザインの方が今の場所に合っているという理由で、<h2>の直後に<h4>を配置するミスが発生します。

HTMLの仕様上、見出しタグの階層をスキップすること（例：h2→h4）は文書構造の破綻を意味します。

スクリーンリーダー（音声読み上げソフト）を利用するユーザーのアクセシビリティを低下させ、検索エンジンに対してもページの論理構造を正しく伝えられません。

見出しは「h1→h2→h3→h4」と順序を守って配置する必要があります。

階層を飛ばす (h2 → h4) 正しい階層 (h2 → h3)

HTMLアウトライン (構造)

h2: 会社概要

h4: 代表挨拶 (階層スキップ)

h2: 会社概要

h3: 代表挨拶 (正しい階層)

HTMLコード表示

<div class="hhead3-wrapper">
  <input type="radio" name="hhead3-state" id="hhead3-bad" class="hhead3-radio" checked>
  <input type="radio" name="hhead3-state" id="hhead3-good" class="hhead3-radio">

  <div class="hhead3-controls">
    <label for="hhead3-bad" class="hhead3-btn">階層を飛ばす (h2 → h4)</label>
    <label for="hhead3-good" class="hhead3-btn">正しい階層 (h2 → h3)</label>
  </div>

  <div class="hhead3-demo-area">
    <div class="hhead3-outline-box">
      <div class="hhead3-outline-title">HTMLアウトライン (構造)</div>
      
      <div class="hhead3-outline target-outline-bad-hhead3">
        <div class="hhead3-level2">h2: 会社概要</div>
        <div class="hhead3-level4 hhead3-error">h4: 代表挨拶 (階層スキップ)</div>
      </div>
      
      <div class="hhead3-outline target-outline-good-hhead3">
        <div class="hhead3-level2">h2: 会社概要</div>
        <div class="hhead3-level3">h3: 代表挨拶 (正しい階層)</div>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hhead3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hhead3-radio {
  display: none;
}

.hhead3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hhead3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#hhead3-bad:checked ~ .hhead3-controls [for="hhead3-bad"] {
  background-color: #dc3545;
  color: white;
}

#hhead3-good:checked ~ .hhead3-controls [for="hhead3-good"] {
  background-color: #198754;
  color: white;
}

.hhead3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.hhead3-outline-box {
  width: 100%;
  max-width: 350px;
  background-color: #333;
  border-radius: 6px;
  padding: 15px;
  color: white;
  font-family: monospace;
  font-size: 14px;
}

.hhead3-outline-title {
  color: #aaa;
  margin-bottom: 15px;
  border-bottom: 1px solid #555;
  padding-bottom: 5px;
}

.hhead3-level2 {
  margin-left: 0;
  margin-bottom: 10px;
}

.hhead3-level3 {
  margin-left: 20px;
  color: #4ade80;
}

/* 階層をスキップした不自然なインデント */
.hhead3-level4 {
  margin-left: 40px; 
}

.hhead3-error {
  color: #f87171;
  border-bottom: 1px dashed #f87171;
}

/* 切り替え処理 */
.target-outline-good-hhead3 {
  display: none;
}

#hhead3-good:checked ~ .hhead3-demo-area .target-outline-bad-hhead3 {
  display: none;
}

#hhead3-good:checked ~ .hhead3-demo-area .target-outline-good-hhead3 {
  display: block;
}

h1〜h6タグ（見出しタグ）の使い分け

見出しタグ（h1〜h6）は、ページ内のトピックを整理し、検索エンジンに「何について書かれたページか」を正確に伝達するタグです。

ここでは、各タグの使い分けルールとSEO評価を低下させないマークアップ手法を解説します。

h1〜h6タグ（見出しタグ）の使い分け

h1タグの役割と適切な使用回数
h2〜h6タグの論理的な階層構造
サイドバーやUIパーツへの見出しタグ流用

h1タグの役割と適切な使用回数

<h1>タグは、ページ全体の主題を示すタグです。

ブログ記事であれば記事のタイトル、トップページであればサイト名やメインコンセプトが該当します。

HTML5の仕様上、1ページ内に複数の<h1>を配置することはエラーになりませんが、SEOの観点から、「1ページにつき1つのh1タグ」を原則とするのが実務における設計です。

複数の主題が存在すると、検索エンジンがページのテーマを判定しにくくなるリスクがあります。

h1を複数配置 (NG) h1を1つに限定 (OK)

カメラ性能の比較

夜景撮影の比較結果です。

最新スマートフォン徹底レビュー

本日は最新機種について解説します。

カメラ性能の比較

夜景撮影の比較結果です。

h2〜h6タグの論理的な階層構造

「文字の大きさを基準に見出しタグを選ぶこと」の他に、「親子関係（グルーピング）を意識せず同列に並べてしまうこと」が挙げられます。

<h2>の下に属する詳細なトピックは<h3>で囲み、別の大きなトピックに移る際は再び<h2>を使用します。

これにより、「大項目の中の中項目」というツリー状の論理構造が完成し、検索エンジンがコンテンツの網羅性を正確に評価できます。

すべて同列に配置 (NG) 親子関係を構築 (OK)

コンテンツのアウトライン構造

h2: おすすめの果物

h2: リンゴの特徴

h2: バナナの特徴

h2: おすすめの野菜

h2: おすすめの果物

h3: リンゴの特徴

h3: バナナの特徴

h2: おすすめの野菜

HTMLコード表示

<div class="htu2-wrapper">
  <input type="radio" name="htu2-state" id="htu2-bad" class="htu2-radio" checked>
  <input type="radio" name="htu2-state" id="htu2-good" class="htu2-radio">

  <div class="htu2-controls">
    <label for="htu2-bad" class="htu2-btn">すべて同列に配置 (NG)</label>
    <label for="htu2-good" class="htu2-btn">親子関係を構築 (OK)</label>
  </div>

  <div class="htu2-demo-area">
    <div class="htu2-outline-box">
      <div class="htu2-outline-title">コンテンツのアウトライン構造</div>
      
      <div class="htu2-outline target-outline-bad-htu2">
        <div class="htu2-level2">h2: おすすめの果物</div>
        <div class="htu2-level2 htu2-error">h2: リンゴの特徴</div>
        <div class="htu2-level2 htu2-error">h2: バナナの特徴</div>
        <div class="htu2-level2">h2: おすすめの野菜</div>
      </div>
      
      <div class="htu2-outline target-outline-good-htu2">
        <div class="htu2-level2">h2: おすすめの果物</div>
        <div class="htu2-level3">h3: リンゴの特徴</div>
        <div class="htu2-level3">h3: バナナの特徴</div>
        <div class="htu2-level2">h2: おすすめの野菜</div>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.htu2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.htu2-radio {
  display: none;
}

.htu2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.htu2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}

#htu2-bad:checked ~ .htu2-controls [for="htu2-bad"] {
  background-color: #dc3545;
  color: white;
}

#htu2-good:checked ~ .htu2-controls [for="htu2-good"] {
  background-color: #198754;
  color: white;
}

.htu2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.htu2-outline-box {
  width: 100%;
  max-width: 350px;
  background-color: #333;
  border-radius: 6px;
  padding: 15px;
  color: white;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;
}

.htu2-outline-title {
  color: #aaa;
  margin-bottom: 15px;
  border-bottom: 1px solid #555;
  padding-bottom: 5px;
}

.htu2-level2 {
  margin-left: 0;
  margin-bottom: 5px;
  color: #fff;
}

.htu2-level3 {
  margin-left: 20px;
  margin-bottom: 5px;
  color: #4ade80;
  border-left: 1px solid #555;
  padding-left: 10px;
}

.htu2-error {
  color: #f87171;
}

.target-outline-good-htu2 {
  display: none;
}

#htu2-good:checked ~ .htu2-demo-area .target-outline-bad-htu2 {
  display: none;
}

#htu2-good:checked ~ .htu2-demo-area .target-outline-good-htu2 {
  display: block;
}

サイドバーやUIパーツへの見出しタグ流用

ブログのサイドバー（「人気の記事」「カテゴリー」）や、フッターのナビゲーションタイトルに<h3>や<h4>を使用してしまうケースもあります。

見出しタグはあくまで「メインコンテンツ（記事本文）」のアウトラインを形成するものです。

サイドバーなどのUIパーツに見出しタグを使用すると、検索エンジンが「記事の一部」として誤認します。

UIパーツのタイトルは<p>や<div>を使用し、CSSで装飾するのが正しいマークアップです。

h3をサイドバーに使用 (NG) divクラスで装飾 (OK)

h1〜h6タグ（見出しタグ）のデザインを変更

見出しタグの視覚的なデザインは、ユーザーの読みやすさとサイト滞在時間に直結する要素です。

テーマのデフォルトデザインから独自のスタイルに変更する際の考え方と階層に応じた実装例を解説します。

h1〜h6タグ（見出しタグ）のデザイン

h1〜h6の見出しタグにおけるデザイン例
見出しタグのデザイン集

h1〜h6の見出しタグにおけるデザイン例

見出しデザインの考え方は、「階層が下がる（h1からh6）につれて、視覚的な重み（装飾ボリュームや文字サイズ）を軽くすること」です。

これにより、ユーザーは直感的に文書構造と重要度を理解できます。

以下に、実務で使われる各階層ごとのデザイン例を示します。

h1: 記事のタイトル（最も目立たせる）

ここにリード文が入ります。

h2: 大見出し（背景色や太い線で区切る）

ここから大見出しの本文が始まります。

h3: 中見出し（シンプルな線でスタイリッシュに）

h4: 小見出し（ワンポイントの装飾）

h5: さらに小さな見出し（控えめな下線など）

h6: 最小の見出し（文字サイズや色のみの変化）

HTMLコード表示

<div class="hdg-wrapper">
  <div class="hdg-h1">h1: 記事のタイトル（最も目立たせる）</div>
  
  <p class="hdg-text">ここにリード文が入ります。</p>

  <div class="hdg-h2">h2: 大見出し（背景色や太い線で区切る）</div>
  
  <p class="hdg-text">ここから大見出しの本文が始まります。</p>

  <div class="hdg-h3">h3: 中見出し（シンプルな線でスタイリッシュに）</div>
  <div class="hdg-h4">h4: 小見出し（ワンポイントの装飾）</div>
  <div class="hdg-h5">h5: さらに小さな見出し（控えめな下線など）</div>
  <div class="hdg-h6">h6: 最小の見出し（文字サイズや色のみの変化）</div>
</div>

CSSコード表示

.hdg-wrapper {
  background-color: #ffffff;
  padding: 30px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hdg-text {
  font-size: 14px;
  color: #333;
  margin: 0 0 30px 0;
  line-height: 1.6;
}

/* --------------------------------------------------
   h1風デザイン：フォントサイズ最大、存在感のある下線
-------------------------------------------------- */
.hdg-h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  padding-bottom: 10px;
  margin-bottom: 25px;
  border-bottom: 3px solid #0d6efd;
  line-height: 1.4;
}

/* --------------------------------------------------
   h2風デザイン：背景色を敷き、左にアクセントカラー
-------------------------------------------------- */
.hdg-h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  background-color: #f8f9fa;
  padding: 12px 15px;
  margin-bottom: 20px;
  border-left: 5px solid #0d6efd;
  border-radius: 2px;
  line-height: 1.4;
}

/* --------------------------------------------------
   h3風デザイン：左と下にボーダーを配置し、スッキリと区切る
-------------------------------------------------- */
.hdg-h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 8px 10px;
  margin-bottom: 15px;
  border-left: 4px solid #0d6efd;
  border-bottom: 1px solid #dee2e6;
  line-height: 1.4;
}

/* --------------------------------------------------
   h4風デザイン：左ボーダーのみのシンプルな構成
-------------------------------------------------- */
.hdg-h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 5px 10px;
  margin-bottom: 15px;
  border-left: 3px solid #0d6efd;
  line-height: 1.4;
}

/* --------------------------------------------------
   h5風デザイン：点線や破線の下線で控えめに
-------------------------------------------------- */
.hdg-h5 {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px dashed #adb5bd;
  line-height: 1.4;
}

/* --------------------------------------------------
   h6風デザイン：装飾線を使わず、文字色とアイコン等で表現
-------------------------------------------------- */
.hdg-h6 {
  font-size: 14px;
  font-weight: bold;
  color: #495057;
  margin-bottom: 15px;
  line-height: 1.4;
}

.hdg-h6::before {
  content: "■";
  color: #0d6efd;
  margin-right: 6px;
  font-size: 12px;
}

見出しタグに関する文字装飾で利用するプロパティを学習したい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【html&css】文字装飾に関するWebデザインまとめ

見出しタグのデザイン集

本サイトではコピペで作れる見出し用デザイン集を記載した「【html&css】コピペだけ！おしゃれな見出し（ラベル）デザイン37選」をご用意しています。

Code Stock

【html&css】コピペだけ！おしゃれな見出し（ラベル）デザイン37選【HTML/CSS】コピペで使えるおしゃれな見出し（ラベル）デザイン37選！シンプル・かわいい・リボン風など、Web制作に役立つおしゃれなCSSコードをプレビュー付きで一挙紹介…

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ

h1タグは1ページにつき1つを原則とする
階層（順番）をスキップしない
デザイン（強調）目的で使用しない
サイドバーやUIパーツに使用しない

見出しのデザインは、階層が下がるにつれて、視覚的な重みを軽くするのがUI設計の基本です。

タグ	役割（文書構造）	デザインの視覚的重み（例）
h1	ページ全体の主題（記事タイトルなど）	最大（一番大きな文字、存在感のある装飾）
h2	大見出し（章）	大（背景色塗りつぶし、太い左ボーダーなど）
h3	中見出し（節）	中（左ボーダー＋下線など、スッキリした区切り）
h4	小見出し（項）	小（左ボーダーのみなど、シンプルな構成）
h5	さらに小さな見出し	極小（点線や破線の下線など、控えめな装飾）
h6	最小の見出し	最小（装飾線なし、文字色と先頭アイコンのみなど）