2026年4月16日
HTML 見出しタグとは？
ウェブページを読みやすくするために欠かせないのが 見出しタグ です。HTML 見出し h1〜h6 の6種類があり、数字が小さいほど重要度が高くなります。
見出しタグを正しく使うと、ページの構造が明確になり、読者にも検索エンジンにも伝わりやすくなります。
h1〜h6の役割と使い分け
| タグ | 役割・使い場面 |
|---|---|
<h1> | ページのメインタイトル。1ページに1つだけ使う |
<h2> | 大見出し。記事の主要なセクションに使う |
<h3> | 中見出し。h2の中のサブセクションに使う |
<h4〜h6> | 小見出し。さらに細かく分けるときに使う |
<h1>プログラミング入門ガイド</h1>
<h2>HTMLとは？</h2>
<p>HTMLはウェブページの骨格を作る言語です。</p>
<h3>よく使うタグ</h3>
<p>h1・p・a・imgなどがよく使われます。</p>
<h2>CSSとは？</h2>
<p>CSSはページの見た目を整える言語です。</p>▶ プレビュー
👉 HTML練習問題10選も参考にしてください。
見出しタグのSEOへの影響
SEO（エスイーオー）とは、Googleなどの検索エンジンでページが上位に表示されやすくなる工夫のことです。
見出しタグはSEOに大きく影響します。特に <h1> はページの主題を検索エンジンに伝える最も重要なタグです。
<h1>にはページのメインキーワードを含める<h2>・<h3>にも関連キーワードを自然に含める- 見出しの順番を飛ばさない（h1→h3のようにh2を飛ばさない）
よくある間違い
❌ デザイン目的で見出しタグを使う
「文字を大きくしたいから h1 を使う」はNGです。文字サイズの変更はCSSで行い、見出しタグは意味のある構造のためだけに使いましょう。
❌ h1を複数使う
1ページに <h1> は1つだけにするのが基本です。複数使うとSEO的に不利になる場合があります。
❌ 見出しの順番を飛ばす
h1の次にh3を使うのは避けましょう。h1→h2→h3の順番で使うのが正しい構造です。
🔥 classとidの違いで実践してみましょう。
CSSで見出しのデザインを変える
h1 {
font-size: 2rem;
color: #0d9488;
border-bottom: 3px solid #0d9488;
padding-bottom: 8px;
}
h2 {
font-size: 1.5rem;
color: #0f766e;
border-left: 4px solid #0d9488;
padding-left: 12px;
margin-top: 32px;
}💡 エラー辞典で基礎を確認できます。
見出しの正しい使い方
見出しタグを正しく使うためのルールを紹介します。
ルール1：h1はページに1つだけ
h1タグはページ全体のタイトルに使います。1つのページにh1は1つだけにしましょう。複数のh1があると、検索エンジンが「このページの主題は何か」を判断しにくくなります。
ルール2：レベルを飛ばさない
h1の次はh2、h2の次はh3、というように順番に使いましょう。h1の次にいきなりh3を使うのは避けてください。本の目次と同じで、大きな章（h2）の中に小さな節（h3）がある、という構造が正しいです。
ルール3：見た目のために使わない
「文字を大きくしたいからh1を使う」のは間違いです。見出しタグは「構造」を表すためのものです。文字の大きさを変えたいだけなら、CSSのfont-sizeを使いましょう。
ルール4：短くわかりやすく書く
見出しの文章は短くしましょう。一目で内容がわかる言葉を選びます。「私が昨日学校で体験したとても面白い出来事について」ではなく「昨日の面白い体験」のように簡潔に書きます。
見出しとSEOの関係
見出しタグは検索エンジン（GoogleやBingなど）にとっても重要です。検索エンジンは見出しを読んで、ページの内容を理解します。
h1タグにはページの主題を表すキーワードを含めましょう。たとえば「HTMLの見出しタグの使い方」のように、検索されそうな言葉を自然に入れます。
h2やh3にも関連するキーワードを含めると、検索結果で上位に表示されやすくなります。ただし、不自然にキーワードを詰め込むのは逆効果です。読者にとってわかりやすい見出しを書くことが、結果的にSEOにも良い影響を与えます。
見出しでよくあるミス
ミス1：見出しの中にリンクや画像だけを入れる
見出しの中身はテキストが基本です。画像だけの見出しは、スクリーンリーダーで読み上げられないことがあります。
ミス2：見出しを装飾目的で使う
太字にしたいだけ、大きくしたいだけで見出しタグを使うと、ページの構造が壊れます。装飾はCSSで行いましょう。
ミス3：見出しが多すぎる
短い文章のあとにすぐ次の見出しが来ると、読みにくくなります。1つの見出しの下には、ある程度の内容を書きましょう。目安として、見出しの下に最低2〜3文は書くようにします。
見出しを正しく使えるようになると、文章を書く力も自然と身につきます。「この段落で何を伝えたいか」を考えて見出しをつける作業は、論理的に考える練習になります。レポートや作文を書くときにも役立つスキルです。
まとめ
- ✅ h1〜h6 は重要度の高い順に使う見出しタグ
- ✅
<h1>は1ページに1つだけ。ページのメインタイトルに使う - ✅ 見出しの順番を飛ばさない（h1→h2→h3の順）
- ✅ デザイン目的ではなく、意味のある構造のために使う
- ✅ 見出しタグはSEOにも重要な役割を持つ
HTMLの基礎はHTML入門で復習できます。見出しのフォントスタイリングはCSSでフォントを変える方法を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLセマンティックタグ入門 — セマンティックHTMLと見出し
- HTMLでアクセシビリティを高める方法 — 見出しとアクセシビリティ
- CSSでフォントを変える方法 — 見出しのフォントスタイリング
- HTMLで初めてのWebページを作る — 最初のページで見出しを使う
- marginとpaddingの違い — 見出しの余白調整