HTMLの「見出しタグ」とは、Webページの中でタイトルや章立てを表現するためのタグで、<h1>から<h6>までの6種類が用意されています。hは「heading（ヘディング＝見出し）」の頭文字で、数字が小さいほど重要度の高い見出しとして扱われます。見出しタグは文字を大きく太くするためのものではなく、「ここが見出しである」という意味をブラウザや検索エンジン、支援技術（スクリーンリーダーなど）に伝えるための仕組みです。テキストの構造を整理し、ページ全体の情報を階層的に表現する役割を持ちます。
HTMLの見出しタグとは何か：h1〜h6の基本的な役割
h1〜h6タグの概要
見出しタグは次の6種類です。
<h1>：ページ全体のタイトルに相当する、最上位の見出し<h2>：大見出し。h1の下に位置する章レベルの見出し<h3>：中見出し。h2の下に位置する小見出し<h4>：さらに細かい見出し<h5>：より小さな見出し<h6>：最も小さなレベルの見出し
一般的なWebページでは、<h1>〜<h3>程度を使うことが多く、<h4>以降は情報量の多いサイトや入れ子構造が深いドキュメントなどで登場します。見出しタグを使うことで、長いテキストでも「どの部分がどの話題なのか」が視覚的にも構造的にも区別しやすくなります。
見出しタグの基本的な書き方
HTMLで見出しを記述する際は、次のように開始タグと終了タグでテキストを挟みます。
<h1>HTML見出しタグの基礎</h1>
<h2>見出しタグの役割</h2>
<p>見出しタグは文章を階層的に整理するために使われます。</p>
<h2>h1〜h6の違い</h2>
<p>番号によって重要度や階層が変わります。</p>この例では、「HTML見出しタグの基礎」がページ全体のタイトル（h1）として表示され、その下に「見出しタグの役割」「h1〜h6の違い」という2つのh2が続いています。それぞれのh2の下に段落（pタグ）があり、本文が書かれている構造です。
見出しタグが果たす3つの重要な役割
見出しタグには、主に次の3つの役割があります。
- 人間にとっての読みやすさ向上
ページをざっとスクロールしたとき、視線がまず向かうのが見出し部分です。見出しが適切に配置されていると、ユーザーは自分に必要な情報がどこに書かれているかをすぐに判断できます。文章を読む前に全体像を把握する「目次」のような機能を果たします。 - 検索エンジンにとっての内容理解の手がかり
検索エンジンはHTMLを解析してページの内容を把握しますが、見出しタグは「この部分は特に重要なテーマです」というサインになります。<h1>や<h2>に書かれたキーワードは、そのページの主題や各セクションのトピックとして認識されやすくなります。 - 支援技術にとってのナビゲーションの軸
スクリーンリーダー（画面読み上げソフト）などは、見出しタグを手がかりにしてページ内を移動する機能を持っています。見出しが適切に付いていると、ユーザーは見出し単位でページ内をジャンプしながら内容を確認できます。これにより、視覚に頼らずに情報を探しやすくなります。
見出しタグと「装飾タグ」の違い
見出しタグと混同されやすいのが、「文字サイズを変えるためのCSS」や、太字を表す<b>タグなどの装飾的な要素です。<h1>〜<h6>は、文字を大きく見せる「デザイン」ではなく、そのテキストが「見出しである」という「意味」を表現するものです。一方、CSSはフォントサイズや色、余白などの見た目を調整するための仕組みです。
例えば、次の2つの書き方は見た目が似ている場合でも、意味は大きく異なります。
<!-- 意味としての見出し -->
<h2>お問い合わせについて</h2>
<!-- 単なる装飾（見出しではない） -->
<p><span style="font-size: 24px; font-weight: bold;">お問い合わせについて</span></p>前者は検索エンジンや支援技術に「ここが見出しです」と伝えられますが、後者は単に文字が大きく太いだけの通常テキストとして扱われます。構造化された情報提供という観点からは、見出しにしたい部分には必ず見出しタグを使うことが重要です。
見出しタグと文書構造の関係
見出しタグは、文書全体の構造（アウトライン）を形作るうえで中心的な要素です。<h1>が文書のトップレベルのタイトルを表し、その下に<h2>のセクションが並びます。さらに、各h2の中にh3の小見出しが続く、といった具合に階層構造を表現できます。
<h1>HTML入門</h1>
<h2>HTMLとは</h2>
<h3>マークアップ言語とは</h3>
<h3>HTMLの歴史</h3>
<h2>基本的なタグ</h2>
<h3>見出しタグ</h3>
<h3>段落タグ</h3>この構造は、書籍でいうと「本のタイトル（h1）→章（h2）→節（h3）」のような関係に近いものです。ブラウザや解析ツールは、この階層構造をもとに文書のアウトラインを把握し、コンテンツの関係性を理解していきます。
h1〜h6における数字の意味
h1〜h6の数字は、単なる大小ではなく、見出しどうしの「レベル」を示しています。h1は最上位、h2はその一段下、h3はさらにその一段下、という関係です。数字が小さいほど文書内での重要度が高い見出しとして扱われるため、ページ全体の主題はh1、大きなトピックはh2、その中の細かい項目はh3といったように割り当てると、論理的な文書構造を表現できます。h1〜h6の数字は、見出し同士の上下関係と相対的な重要度を示す目安として解釈されます。
見出しタグで作るページ構造：アウトライン思考で考えるHTML
HTMLにおける「アウトライン思考」とは、ページ全体を一つの文章として捉え、その文章がどのような章・節・項目で構成されているかを、見出しタグ（h1〜h6）を使って体系的に整理する考え方です。アウトラインとは「骨組み」や「構造」を意味し、見出しを使ってページ全体の情報の階層を明確にしていくことで、ユーザーにも検索エンジンにも理解しやすいページになります。アウトライン思考を身につけることで、ただ見た目を整えるだけのHTMLではなく、意味のある構造を持ったHTMLを書くことができるようになります。
見出しタグがアウトラインを形成する仕組み
見出しタグは、それぞれがページ内の「節タイトル」のような役割を果たします。特にHTML5では、見出しタグそのものがページ内の論理構造を構築する重要な要素とされています。例えば：
<h1>：ページ全体のテーマ<h2>：大きなトピック<h3>：トピック内の小テーマ
というように、数字が小さいほど上位の見出しとして扱われます。この数字の順序がアウトラインのレベルに対応しているため、ページを作るときには「今書こうとしている見出しはページ構造のどの位置に属するのか」を常に意識することが重要です。
アウトラインを意識したHTML構造の例
アウトライン思考を取り入れたページ構造の例を示します。
<h1>HTML見出しタグの基本</h1>
<h2>見出しタグとは</h2>
<p>見出しタグの概要について説明します。</p>
<h3>見出しタグの目的</h3>
<p>文章の構造化に役立ちます。</p>
<h3>見出しタグがもつ意味</h3>
<p>意味を持った文章構造を作れます。</p>
<h2>見出しタグの使い方</h2>
<p>見出しタグの具体的な使い方を紹介します。</p>この例では、
- h1が最上位のタイトル
- h2が「大見出し」
- h3が「その中の小見出し」
という階層構造を形成しています。
アウトラインを意識した書き方は、書籍の章立てと非常に似ています。たとえば「本のタイトルがh1」「各章がh2」「各章の節がh3」という形で自然な構造が作れます。HTMLを書く際にも、この文書構造を忠実に反映することが、読みやすく整理されたページを作るうえで欠かせません。
セマンティックタグとの組み合わせによる構造化
HTML5では、<section>や<article>、<nav>、<aside>などのセマンティック（意味のある）要素が追加されました。これらと見出しタグを組み合わせることで、より明確なアウトラインを示すことができます。
たとえば、各<section>内に対応する見出しを置くことで、そのセクションの主題を明確化できます。
<section>
<h2>HTMLの役割</h2>
<p>HTMLが果たす役割について説明します。</p>
</section>
<section>
<h2>見出しタグの種類</h2>
<p>h1〜h6それぞれの違いを紹介します。</p>
</section>このように、セクション要素ごとに見出しが存在すると、文書の全体構造が格段に理解しやすくなります。
アウトラインが意識されていない例とその問題点
以下のように、見出しレベルがランダムに使われているケースはよくあります。
<h1>サイトタイトル</h1>
<h4>サービス紹介</h4>
<h2>料金プラン</h2>
<h5>注意事項</h5>このような構造では、読み手にも検索エンジンにもページの論理的な関係が伝わりません。サービス紹介がh4で始まっているため、「どの章に属するのか」が非常にわかりにくい構造になります。HTMLでは、見出しタグを見たときにそのレベルから内容の重要度や位置づけを推測できるべきです。
数字を飛ばして使うことが絶対に禁止されているわけではありませんが、論理的な階層を無視してしまうとアウトラインが崩れ、読み手にも機械にも正しい情報が伝わりにくくなります。
アウトラインを作るうえで意識したいポイント
アウトライン思考でHTMLを書く際に意識したいポイントは次のとおりです。
- h1はページ全体のタイトルとして機能する
- ページの大きな項目はh2で記述する
- h2の内容をさらに分けたい場合にh3を使う
- 階層を深めるときは順番に数字を増やす
- デザインのために見出しタグのレベルを変えない
- 意味のまとまり単位でsectionやarticleと組み合わせる
これらを守ることで、自然で読みやすく、検索エンジンにとっても理解しやすいページ構造が形成されます。
アウトライン思考を身につけるメリット
アウトライン思考を取り入れると、次のようなメリットがあります。
- ページ全体の構造が整理され、読みやすくなる
- 検索エンジンが内容を把握しやすくなる
- スクリーンリーダー利用者が見出しを使って快適に移動できる
- 開発者同士でコードを共有したときに意図が伝わりやすい
- 大規模なページでも編集や修正を行いやすくなる
HTMLの学習初期段階では「見出しのレベルを揃えること」を意識するだけでも大きな効果があります。
h1タグの使い方：1ページ1つが推奨される理由と実例
h1タグは、HTMLの見出しタグの中でも最も上位に位置する要素で、ページ全体の「タイトル」や「テーマ」を示すために使われます。h1タグに囲まれたテキストは、そのページが何について書かれているかを端的に表す役割を持ちます。書籍でいえば「本のタイトル」にあたるイメージで、ページの内容をひと言で説明するラベルのようなものです。ブラウザはh1を太字で大きく表示することが多いですが、重要なのは見た目ではなく「ここがページの最上位の見出しである」という意味づけの部分です。
なぜ「1ページに1つ」が推奨されるのか
h1タグは、ページ全体の主題を表すための見出しとして使うのが基本的な考え方です。そのため、多くの制作現場やガイドラインでは「1ページに1つのh1」が推奨されています。理由としては、主に次のような点が挙げられます。
- ページのテーマが明確になる
- 検索エンジンがページの主題を把握しやすくなる
- スクリーンリーダーがページの「トップレベル見出し」として扱いやすくなる
- 開発者同士でコードを読むときに、どこがページのタイトルか判断しやすい
HTML5の仕様では、セクション要素の中に複数のh1を使うことも技術的には可能ですが、実務的には「ページの主題を示すh1をひとつに決める」設計の方がわかりやすく、トラブルも起こりにくくなります。
h1タグとtitleタグの違い
よく混同されるものとして、<title>タグとの違いがあります。<title>タグは<head>要素の中に書き、ブラウザのタブやお気に入り、検索結果のタイトル部分などに使われる「文書のタイトル」です。一方、<h1>は<body>内に書き、画面に直接表示される「ページ内の見出し」です。
<head>
<title>HTML見出しタグ入門｜学習サイト</title>
</head>
<body>
<h1>HTML見出しタグ入門</h1>
</body>このように、titleタグはブラウザや検索結果用、h1タグはページの本文側でユーザーに見せるための見出しとして役割分担します。内容を完全に同じにしてもよいですし、サイト名を含めるなどしてtitleの方を少し長くすることもあります。
h1タグにふさわしいテキストの考え方
h1に入れるテキストは、そのページの内容を短くわかりやすく表現したものが適しています。具体的には、次のようなポイントを意識するとよいです。
- ページ全体のテーマを一言で言い表す
- あいまいな言葉ではなく、内容が想像しやすい言葉を使う
- 単なるデザイン用の文言ではなく、意味のある文章にする
- 検索してほしいキーワードを無理のない範囲で含める
たとえば、HTMLの見出しタグに関する解説ページなら、
- 「HTMLの見出しタグ（h1〜h6）の基本と使い分け」
- 「はじめてのHTML見出しタグ：h1からh6までを丁寧に解説」
といった表現が考えられます。ユーザーが検索結果からこのページを開いたとき、「あ、まさにこの内容だ」と感じられるタイトルがh1として望ましいテキストです。
典型的なh1タグの実例
いくつかのページタイプごとに、h1の置き方の例を見てみます。
ブログ記事のページ
ブログ記事では、その記事のタイトルをh1にするのが一般的です。
<h1>HTML見出しタグを使って読みやすい記事を書く方法</h1>
<p>この記事では、h1〜h3の基本的な使い方について解説します。</p>この場合、h1はそのページ固有の内容（この記事だけのテーマ）を表します。
企業サイトのトップページ
企業サイトのトップページでは、サイト全体を代表するキャッチコピーや会社名＋説明文をh1にすることが多いです。
<h1>〇〇株式会社｜Webシステム開発とデザインのパートナー</h1>トップページは複数のコンテンツを含みますが、全体として「どんなサイトなのか」を示す一行がh1になります。
サービス紹介ページ
特定のサービスに特化したページであれば、そのサービス名を中心にした見出しがh1に相当します。
<h1>オンラインプログラミング講座：未経験からWebエンジニアを目指すコース</h1>その下に、特徴や料金、カリキュラムなどをh2・h3で展開していきます。
複数のh1を使う場合に起こりやすい混乱
HTML5のセクショニングコンテンツ（sectionやarticleなど）では、理論上各セクションごとにh1を持つことも可能ですが、実務では複数h1を使うと次のような混乱が起こりがちです。
- どれがページ全体の主題なのか、開発者同士で認識がずれる
- デザイン側の都合でh1を乱用し、「目立たせたいからh1」という使い方になりやすい
- 一部のツールやチェックサービスで警告が出ることがある
そのため、学習段階や一般的なWeb制作では「ページの主題を表すh1は1つ、その下にh2〜h3で構造を作る」というルールを採用しておく方が分かりやすく、安全です。
h1を見出し以外の目的で使わない
h1タグは目立つ見た目を持つことが多いため、「文字を大きくしたいからh1を使う」という誤った使い方をしてしまうケースがあります。しかし、デザイン目的で見出しレベルを変えるのは避けるべきです。見た目の調整はCSSで行い、HTML側では意味の構造だけを正しく表現することが望ましい書き方になります。
h2〜h6タグの階層構造：見出しレベルを揃える考え方
h2〜h6タグは、h1タグで示されたページ全体のタイトルの下で、内容を細かく分けていくための見出しタグです。これらは単に「少し小さい見出し」という意味ではなく、「どの話題がどの話題の下位にあるか」という階層構造を表現するための道具です。見出しの階層がきれいに揃っていると、ページの構造がひと目で理解しやすくなり、ユーザーにとっても、検索エンジンやスクリーンリーダーにとっても扱いやすいHTMLになります。
h2は「大きな項目」、h3以降はその中の小さな項目
h1がページ全体のタイトルだとすると、h2はそのページを構成する「大きな項目」を表します。書籍にたとえると「章」に相当します。そのh2の中で内容をさらに細分化したい場合に、h3を使って「節」のような小項目を作ります。同様に、h3の下位にさらに小さなトピックがある場合に、h4、h5、h6というように階層を深めていきます。
<h1>HTML見出しタグ入門</h1>
<h2>見出しタグとは</h2>
<h3>見出しタグの目的</h3>
<h3>見出しタグの種類</h3>
<h2>見出しタグの使い方</h2>
<h3>h1の役割</h3>
<h3>h2〜h6の階層構造</h3>この例では、「HTML見出しタグ入門」がページ全体のテーマであり、その中に「見出しタグとは」「見出しタグの使い方」という2つの大きな項目（h2）が存在しています。それぞれのh2の中が、h3で細かく分かれている構造です。
数字を飛ばさないのが基本的な考え方
見出しのレベルは、基本的に1つずつ順番に深くしていくのが分かりやすい書き方です。例えばh2の直下にいきなりh4を置くような書き方は、アウトラインの観点からは不自然になります。
<!-- あまり望ましくない例 -->
<h2>見出しタグの使い方</h2>
<h4>h2の後にいきなりh4が登場</h4>このようにすると、「このh4はどの階層に属しているのか」「h3に当たる情報はどこにあるのか」が分かりづらくなります。基本的には、h2の直下で小項目を作るときはh3、その下をさらに分けるときにh4、と数字を一段ずつ増やしていくことを意識します。どうしても数字を飛ばす必要があるケースは少ないため、学習段階では「数字は飛ばさない」と考えておくと整理しやすくなります。
同じ階層では同じレベルの見出しを使う
同じ階層に並ぶ見出しは、同じレベルのタグを使うことが重要です。たとえば、ページ内の「大きな項目」が3つあるなら、それらはすべてh2で統一します。
<h2>HTMLとは</h2>
<h2>見出しタグの概要</h2>
<h2>見出しタグの使いどころ</h2>この3つは、ページ全体の中で同じレベルの話題として扱われます。一方で、もし片方をh2、片方をh3にしてしまうと、文書構造上は「片方がもう片方の下位トピック」であるかのように見えてしまいます。
<!-- 構造として不自然な例 -->
<h2>HTMLとは</h2>
<h3>見出しタグの概要</h3>
<h2>見出しタグの使いどころ</h2>この例では、「見出しタグの概要」が「HTMLとは」の下位項目であり、「見出しタグの使いどころ」はそれと同列の大項目になってしまいます。もし「HTMLとは」「見出しタグの概要」「見出しタグの使いどころ」がすべて同じレベルの説明であれば、h2で揃えるべき内容ということになります。
セクションごとに階層をそろえるイメージ
ページ全体を「h1 → 複数のh2 → h2の下に複数のh3」という形で整理していくと、自然なアウトラインが出来上がります。例えば、次のような構造です。
<h1>見出しタグの使い方ガイド</h1>
<h2>見出しタグの基礎知識</h2>
<h3>見出しタグとは何か</h3>
<h3>h1〜h6の違い</h3>
<h2>見出しタグの実践的な使い方</h2>
<h3>ページタイトルとh1</h3>
<h3>セクション構造とh2</h3>
<h2>よくある間違いと注意点</h2>
<h3>デザイン目的だけのレベル変更</h3>
<h3>見出しを飛ばしてしまうケース</h3>この例では、h2が大きなまとまりを示し、その下でh3が内容を整理しています。もしさらに細かく分けたいときには、h3の下にh4を置いていくことになります。
デザインと階層を切り離して考える
見出しレベルを揃えるときに注意したいのが、「見た目の大きさ」と「階層のレベル」を混同しないことです。例えば、「この見出しは小さく表示したいからh4にする」といった判断をしてしまうと、本来同レベルの情報であるにもかかわらず階層が崩れてしまいます。
見た目のサイズや色、余白などはCSSで自由に調整できます。同じh2タグでも、デザイン上は1つだけ特別に大きくしたり、逆に小さくしたりすることも可能です。HTML側では「この見出しは文書構造上どの位置にあるか」だけを考え、見た目の調整は後からまとめてCSSで行う、という分担を意識すると階層の乱れを防げます。
h4〜h6は「必要になったときだけ」使うイメージ
h4〜h6は、階層をさらに細かく分けたいときに使う見出しですが、一般的なWebページではh3までで十分なことも多いです。無理に深い階層を作ると、ユーザーにとっても情報が細切れになりすぎて理解しづらくなる場合があります。説明したい内容が多い場合でも、「本当にこの細かさまで分ける必要があるか」「別ページに分割した方が分かりやすくならないか」といった観点も合わせて検討すると、適切なレベルの階層でまとめやすくなります。
読みやすさを高める見出しタグの書き方とテキストのコツ
HTMLの見出しタグは、単に構造を表すだけでなく、「読者がパッと見て内容を理解できるかどうか」に大きく関わります。同じh2やh3を使っていても、テキストの書き方によって読みやすさや印象が大きく変わります。ここでは、見出しタグの中に書くテキストの工夫や、読みやすさを高めるための実践的なコツを整理してご説明します。
見出しは「その下の内容を一言で説明するタイトル」にする
見出しテキストを書くときの基本は、「この見出しの下にどんな内容が続くのか」を短く表したタイトルにすることです。読者は、見出しをざっと眺めながら、自分が知りたい情報がどこに書かれているかを探します。そのため、見出しは本文の要約ではなく、本文の「ラベル」として機能するように意識します。
たとえば、次のような書き方を比較してみます。
- 良い例：
<h2>見出しタグでページ構造を整理するメリット</h2> - あいまいな例：
<h2>いろいろなポイントについて</h2>
後者の「あいまいな例」では、何についてのポイントなのかが見出しから判断しにくく、読者がスクロールしながら内容を把握しづらくなってしまいます。
キーワードを自然な形で含める
見出しには、そのセクションの重要なキーワードを自然な文章の中に含めると効果的です。ここでいうキーワードとは、「読者が知りたいと思っている言葉」や「ページの主要なテーマに関わる用語」のことです。無理に詰め込むのではなく、読みやすさを保ちながら盛り込むことがポイントです。
例として、「HTML 見出しタグ 読みやすさ」をテーマにしたセクションであれば、
読みやすいHTML見出しタグを書くための3つのポイント読者に伝わる見出しテキストの作り方：HTML見出しタグ編
のように、HTML・見出しタグ・読みやすさといった要素を組み合わせて表現できます。
長すぎず、短すぎないバランスを意識する
見出しは短ければ短いほどよい、というわけではありませんが、あまり長すぎると一目で内容を把握しづらくなります。逆に、単語1つだけの見出しも情報量が少なく、セクションの中身が想像しにくくなります。
目安としては、以下のような点を意識していただくと良いです。
- h2：20〜30文字前後で、章の内容がイメージできる長さ
- h3：やや短めでもよいが、何を説明するのかは分かるようにする
もちろん、内容によって前後しますが、「スマホで見たとき1〜2行に収まるくらい」を意識すると読みやすい長さになりやすいです。
箇条書きと相性のよい見出しをつける
見出しのすぐ下に箇条書きを置く場合、見出しテキストと箇条書きの内容が論理的につながるような書き方を意識します。
<h2>読みやすい見出しを書くためのポイント</h2>
<ul>
<li>内容が想像できる具体的な言葉を使う</li>
<li>キーワードを自然な文章に含める</li>
<li>長さのバランスを意識する</li>
</ul>この例では、「ポイント」という言葉を見出しに入れることで、その下に箇条書きが続いても自然に読める構成になっています。見出しと本文のつながりを意識することで、ユーザーはストレスなく情報を追うことができます。
読者目線の言葉選びをする
見出しの言葉は、書き手側の都合ではなく「読者がどう感じるか」を基準に選ぶことが重要です。専門用語を使う場合は、読者がその用語を知っている前提でよいのかを一度立ち止まって考えると良いです。初心者向けの記事であれば、難しい言葉だけで構成された見出しは避け、必要に応じて言い換えたり、少し説明的な表現にしたりします。
例として、
- 難しめの表現：
セマンティックな見出し構造の最適化 - 初心者向けの言い換え：
意味が伝わる見出し構造の作り方
のように、意味は保ちつつ、理解しやすい言葉に入れ替える工夫が考えられます。
パターンを持っておくと書きやすくなる
見出しの書き方には、いくつか定番のパターンがあります。パターンを意識しておくと、迷わず書けるようになります。
例として、次のような形です。
- 「〜とは」型：定義や概要を説明するセクション
- 例：
HTMLの見出しタグとは何か - 「〜のポイント」型：コツや注意点を箇条書きで説明するセクション
- 例：
読みやすい見出しを作る3つのポイント - 「〜の手順」型：手順や流れを説明するセクション
- 例：
見出しタグを使ってページ構造を設計する手順 - 「〜の例」型：サンプルコードや実例を紹介するセクション
- 例：
実際のブログ記事における見出し構成の例
こうした型を覚えておくと、記事全体の見出しに統一感が生まれ、読者にとって内容が追いやすくなります。
ページ全体でトーンと文体をそろえる
見出しの文体（〜です／〜だ／名詞止めなど）は、ページ全体でなるべく揃えることが望ましいです。h2の一部が「〜とは？」、別のh2が「〜の解説です」、別のh2が「〜のポイント」とバラバラなトーンだと、文章全体の印象がまとまりにくくなります。
たとえば、「〜とは何か」「〜のポイント」「〜の手順」「〜の注意点」といった形で、名詞＋説明のスタイルで揃える、あるいは「〜する方法」「〜してみよう」のように動詞をそろえる、といった工夫が考えられます。
コード上でも読みやすさを意識する
見出しタグのテキストは、ブラウザ上だけでなく、コードを読むときにも目に入ります。インデントや空行を適切に使うことで、HTMLファイルの中でも見出しの位置がひと目で分かりやすくなります。
<h2>HTML見出しタグの基本</h2>
<p>ここに本文が入ります。</p>
<h2>見出しタグで作るページ構造</h2>
<p>ここに本文が入ります。</p>このように、見出しごとに1行空ける、インデントをそろえる、といった工夫は、小さなことですが読みやすさに影響します。
初心者がやりがちな見出しタグの間違いとその修正方法
HTMLを学び始めたばかりの段階では、見出しタグ（h1〜h6）を「文字を大きくするためのタグ」として捉えてしまいがちです。その結果、ページの構造が分かりにくくなったり、検索エンジンやスクリーンリーダーに正しく意味が伝わらなくなったりすることがあります。ここでは、初心者の方が特につまずきやすい見出しタグの使い方のミスと、その直し方を具体例とともに整理します。
間違い1：見た目だけのために見出しレベルを変える
もっともよくある間違いが、「デザインの都合で見出しレベルを決めてしまう」パターンです。例えば、「この見出しは少し小さく見せたいからh3」「この文字をとても目立たせたいからh1」というように、文書構造ではなく見た目の大きさで選んでしまうケースです。
<!-- よくある間違いの例 -->
<h1>サイトタイトル</h1>
<h3>少し小さく見せたい見出し</h3>
<h5>もっと小さく見せたい見出し</h5>このような書き方をすると、アウトラインとして見たときに「どの見出しがどの話題の下位なのか」が分からなくなってしまいます。本来は同じレベルの内容であっても、タグのレベルがバラバラだと、機械的には上下関係があるように解釈されてしまいます。
修正方法のポイント
- 見出しの「重要度」と「階層」でタグのレベルを決める
- 見た目の大きさはCSSで調整する
<!-- 構造を優先した正しい例 -->
<h1>サイトタイトル</h1>
<h2>大きなトピックA</h2>
<h2>大きなトピックB</h2>見た目を変えたい場合は、CSS側でh2の文字サイズを変更することで対応します。
間違い2：同じレベルの見出しを違うタグで書いてしまう
ページ内で同じ重要度・同じ階層の見出しなのに、h2とh3が混在してしまうケースも多く見られます。例えば、3つのセクションがすべて同じレベルの話題なのに、途中だけh3になっているような場合です。
<!-- よくある間違いの例 -->
<h2>HTMLとは</h2>
<p>HTMLの概要です。</p>
<h3>見出しタグとは</h3>
<p>見出しタグの説明です。</p>
<h2>CSSとは</h2>
<p>CSSの概要です。</p>この構造だと、「見出しタグとは」が「HTMLとは」の下位項目になってしまい、CSSとは同列の話題には見えません。意図として「HTML・見出しタグ・CSS」が同じレベルで並んでいるのであれば、ここはすべてh2で揃える方が自然です。
修正方法のポイント
- ページを「章立て」してみて、同じ章レベルのものは同じhレベルに揃える
- 紙の目次をイメージし、「どこが章でどこが節か」を整理してからタグを決める
<!-- 修正後の例 -->
<h2>HTMLとは</h2>
<p>HTMLの概要です。</p>
<h2>見出しタグとは</h2>
<p>見出しタグの説明です。</p>
<h2>CSSとは</h2>
<p>CSSの概要です。</p>間違い3：見出しのレベルを飛ばしてしまう
h2の次にh4を使う、h3の次にいきなりh5を使うといった「レベル飛ばし」も、初心者の方に多いミスです。これは主に、デザインのテンプレートや他人のコードをコピペしたときに意図せず起こることがあります。
<!-- よくあるレベル飛ばし -->
<h2>見出しタグの基本</h2>
<h4>h1〜h6の概要</h4>アウトラインとして考えると、「h3で表現されるべき階層」が抜け落ちている状態になってしまいます。
修正方法のポイント
- h2の下には、まずh3を使って小項目を作る
- さらにその下を細分化したいときに初めてh4を使う
<!-- 修正後の例 -->
<h2>見出しタグの基本</h2>
<h3>h1〜h6の概要</h3>階層を深くしたくなったときには、「本当にここまで細かく分ける必要があるか」を一度考え直してみると、無駄なレベル飛ばしを防ぎやすくなります。
間違い4：見出しを多用しすぎる／逆に少なすぎる
ほとんどの文章を見出しタグで囲ってしまい、「どこもかしこも見出しだらけ」になっているパターンもあります。例えば、ページ内の各行をすべてh3で書いてしまうと、アウトライン上は「見出しの連続」になってしまい、本文の位置が分からなくなります。
<!-- よくある極端な例 -->
<h2>HTML見出しタグの基本</h2>
<h3>見出しタグの概要です。</h3>
<h3>見出しタグはh1〜h6まであります。</h3>
<h3>本文もすべてh3で書かれています。</h3>本来、見出しの下には本文（pタグなど）が続くのが自然な構造です。
逆に、まったく見出しを置かず、長い本文だけが続いているページも読みづらくなります。スクロールしても区切りが見えないため、どこで話題が変わったのかが分かりにくくなってしまいます。
修正方法のポイント
- 見出しは「話題の区切り」にだけ使う
- 見出しの直下には段落やリストなどの本文を置く
- 長文が続く場合は、適切な位置で見出しを挿入して区切る
<!-- 修正後の自然な構造の例 -->
<h2>HTML見出しタグの基本</h2>
<p>見出しタグは、文章を階層的に整理するためのタグです。</p>
<h3>見出しタグの種類</h3>
<p>h1〜h6までの6種類があります。</p>間違い5：見出しなのに内容が分からないテキスト
見出しタグの中身が「あいまいすぎる」「何についての見出しか分からない」というケースも、実はよく見られます。
<!-- あいまいな見出しの例 -->
<h2>いろいろな注意点</h2>
<h2>まとめて紹介</h2>このような見出しでは、読者も検索エンジンも、その下にどんな内容が書かれているのか判断しにくくなります。
修正方法のポイント
- その見出しの下に書く内容を、一言で説明する意識を持つ
- 読者の視点から「この見出しを見て、中身が想像できるか」を考える
<!-- 修正後の例 -->
<h2>見出しタグを使うときの注意点</h2>
<h2>初心者が誤解しやすい見出しタグの使い方</h2>このように具体的な表現にすることで、見出しだけをざっと読んでもページの全体像が把握しやすくなります。
間違い6：h1を複数置いてしまう
h1タグをページのあちこちで使ってしまうのも、初心者に多いミスです。大きく太い見出しだからといって、「大事なところには全部h1を使う」という発想で書いてしまうと、どこがページの主題なのか分からなくなります。
修正方法のポイント
- ページ全体のテーマを表すh1は1つに決める
- それ以外の見出しはh2以下を使って階層構造を作る
<!-- h1が多すぎる例 -->
<h1>HTMLとは</h1>
<h1>CSSとは</h1>
<h1>JavaScriptとは</h1>
<!-- 修正後の例 -->
<h1>Web制作の基本用語</h1>
<h2>HTMLとは</h2>
<h2>CSSとは</h2>
<h2>JavaScriptとは</h2>このように整理することで、1ページ1つのh1というシンプルで分かりやすい構造になります。
SEOとアクセシビリティの観点から見た見出しタグの重要性
HTMLの見出しタグ（h1〜h6）は、デザインや文章構造のためだけでなく、SEO（検索エンジン最適化）とアクセシビリティ（誰もが利用しやすい状態）の両面で非常に重要な要素です。見出しをきちんと設計しておくことで、検索結果で正しく評価されやすくなり、画面読み上げソフトなどを利用するユーザーにとっても、情報を理解しやすいページになります。ここでは、SEOとアクセシビリティという2つの観点から、見出しタグの重要性を整理して解説します。
SEOにおける見出しタグの役割
SEOとは、検索エンジンにページの内容を正しく理解してもらい、ユーザーが検索したときに見つけてもらいやすくするための工夫のことです。検索エンジンは、HTMLの構造を読み取りながら「このページはどんなテーマについて書かれているのか」「どの部分が特に重要なのか」を判断しています。そのとき、見出しタグはページの主題や各セクションのトピックを示す重要な手がかりになります。
特に、h1やh2に書かれたテキストは、「このページ全体」「このセクション」が何をテーマにしているかを伝える指標として扱われます。たとえば、h1に「HTMLの見出しタグの基本」と書かれていれば、「HTML」「見出しタグ」といった言葉がページの主なキーワードであることを検索エンジン側も推測しやすくなります。
ただし、単にキーワードを詰め込めばよいわけではありません。見出しが不自然な文章になると、ユーザーにとって読みづらくなり、結果としてページの評価が下がる可能性もあります。見出しには、検索してきた人が「このページはまさに自分の知りたいことを書いていそうだ」と感じられる、自然で分かりやすい文章を書くことが重要です。
キーワードと見出しの関係
SEOの観点からは、ターゲットとするキーワードを適切な見出しに含めることがよく推奨されます。たとえば、「HTML 見出しタグ 使い方」というテーマのページであれば、以下のような見出し構成が考えられます。
- h1：HTMLの見出しタグ（h1〜h6）の基本と使い方
- h2：見出しタグとは何か
- h2：見出しタグを使ったページ構造の考え方
- h2：HTML見出しタグの書き方と注意点
このように、ページ全体の主題に関するキーワードを、h1や主要なh2に自然な形で含めることで、「どのキーワードに関するページなのか」を検索エンジンが把握しやすくなります。
一方で、すべての見出しに無理やり同じキーワードを入れ続けるのは逆効果です。不自然な文章になり、ユーザーの読みやすさを損なうからです。あくまで「読者にとって分かりやすいか」を基準にした上で、重要なキーワードを要所要所に配置するイメージが理想的です。
アクセシビリティにおける見出しタグの役割
アクセシビリティとは、視覚や聴覚などに障害がある方も含め、できるだけ多くの人が情報や機能にアクセスできるようにする考え方です。HTMLの見出しタグは、アクセシビリティの観点からも非常に重要な役割を果たします。
スクリーンリーダーと呼ばれる画面読み上げソフトは、ページの見出し構造を読み取り、ユーザーが見出しごとにジャンプして移動できる機能を備えています。適切にh1〜h6が使われているページでは、ユーザーは「次の見出しへ」「前の見出しへ」といった操作で、効率よく必要な情報の場所へ移動することができます。
逆に、見出しが使われていなかったり、構造が乱れていたりすると、スクリーンリーダー利用者はページを上から順番に延々と読み上げさせるしかなくなり、大きな負担になります。見出しタグをルールに沿って付けることは、視覚的なデザインのためだけではなく、「誰にとっても使いやすいページ」に近づけるための重要なステップになります。
見出しタグとナビゲーション性
見出しが適切に付けられているページでは、視覚的にも論理的にも「目次」のような役割を果たします。読者は見出しをざっと眺めるだけで、ページの全体像をつかみ、自分が読みたい部分だけに絞って読み進めることができます。
スクリーンリーダーにも「見出し一覧」を表示する機能があります。これにより、ページ内の見出しだけを一覧表示し、その中から興味のある見出しにジャンプすることができます。見出しのテキストが分かりやすく書かれていれば、視覚に頼らずともページの構成と内容をイメージしやすくなります。
SEOとアクセシビリティは対立しない
SEOとアクセシビリティは、ときどき別々の話題として語られますが、見出しタグに関しては両者はむしろ同じ方向を向いています。どちらの観点からも、「ページ構造を正しく表現する」「見出しテキストを分かりやすく書く」「見出しレベルを揃える」といった基本が重要です。
- SEOの観点：検索エンジンがページの主題と各セクションの内容を理解しやすくなる
- アクセシビリティの観点：スクリーンリーダー利用者が見出しを使って効率よく情報にアクセスできる
このように、見出しタグを適切に使うことは、検索エンジンにも人間にも優しいHTMLを書くことにつながります。
まとめ
この記事では、HTMLの見出しタグ（h1〜h6）をテーマに、基礎から実践的な使い方までを順を追って整理しました。まず前半では、「見出しタグとは何か」という基本から入りました。見出しタグは単に文字を大きくするための装飾ではなく、「ここが文章のどの位置づけなのか」「この部分はどんな話題のタイトルなのか」といった文書構造を表すためのタグであることを確認しました。h1はページ全体のタイトル、h2は大きな項目、h3以降はその下位の項目として使い分けることで、書籍の「タイトル → 章 → 節」に似た階層構造をHTML上に表現できることも解説しました。
次に、「アウトライン思考」という考え方に触れながら、見出しタグでページ構造を組み立てる方法を学びました。ページを設計するときに、最初に目次のような形で「このページにはどんな話題が、どんな順番で登場するのか」を整理し、それをh1〜h3などの見出しに落とし込む流れです。このとき、同じレベルの話題には同じレベルの見出しタグを使い、h2の下にはh3、さらに深くしたいときにh4といったように、数字を飛ばさず階層を整えることが重要であるとお伝えしました。
h1タグについては、特に「1ページに1つ」が推奨される理由を詳しく説明しました。h1はそのページ全体の主題を示す役割を持つため、複数置いてしまうと「結局このページは何についてのページなのか」がぼやけてしまうからです。ブログ記事なら記事タイトル、サービス紹介ページならそのサービス名と説明文、トップページならサイト全体を表すキャッチコピーなどをh1にする、といった実例を通して、どのようなテキストがh1にふさわしいかも整理しました。
h2〜h6については、階層構造を崩さないための考え方として、「同じ階層では同じレベルの見出しを揃える」「h2の直下で小見出しを置くときはh3を使う」といった基本ルールを取り上げました。また、見た目（文字サイズや太さ）を変えたいからといって見出しレベルを変えるのではなく、見た目はCSSで調整し、HTML側ではあくまで意味と階層だけを意識してタグを選ぶことが、結果としてきれいなアウトラインにつながることも説明しました。
見出しテキストそのものの書き方に関しては、「その下に続く内容を一言で説明するタイトルにする」「読者が検索しそうなキーワードを自然な形で含める」「長すぎず短すぎないバランスを意識する」といったポイントを挙げました。さらに、「〜とは」「〜のポイント」「〜の手順」「〜の例」といった定番パターンを使うことで、記事全体のトーンを揃えやすくなり、見出しをざっと読むだけでページの全体像がイメージしやすくなることもお伝えしました。
初心者がやりがちな間違いとしては、デザイン目的だけでレベルを変えてしまうケース、同じ階層の話題なのにh2とh3が混在してしまうケース、h2の次にいきなりh4を使うといったレベル飛ばし、本文までhタグにしてしまい見出しだらけになるケース、意味が分かりづらいあいまいな見出しテキスト、h1を複数設置してしまうケースなどを紹介しました。それぞれについて、「構造はこうあるべき」という観点から修正例を示し、紙の目次をイメージしながら見出しレベルを決めると整理しやすいことを解説しました。
最後に、SEOとアクセシビリティの観点から、見出しタグがなぜ重要なのかを整理しました。SEOの面では、検索エンジンがh1やh2の内容を手がかりにページの主題や各セクションのトピックを判断していること、見出しに自然な形でキーワードを含めることが内容理解の助けになることを説明しました。一方、アクセシビリティの面では、スクリーンリーダー利用者が見出し一覧や見出しジャンプ機能を使ってページ内を効率よく移動していること、構造化された見出しがあることで視覚に頼らずともページ全体の構成を把握しやすくなることを解説しました。
これらを通して、見出しタグは単なる装飾ではなく、「構造」「読みやすさ」「検索エンジンへの伝わりやすさ」「多様なユーザーへの配慮」を同時に支える、HTMLの中でも特に重要な要素であることを確認してきました。実際のコーディングでは、ページを作るたびに「このページのh1は何か」「h2はどの単位で区切るか」「同じレベルの話題に同じレベルの見出しを使えているか」を意識しながら、少しずつアウトライン思考に慣れていくことが大切です。