見出しタグは「文章の見出し」と「ページのアウトライン」を作るもの
見出しタグ（<h1>〜<h6>）は、
文字を大きくするためのタグではなく、
「ここがタイトルです」「ここがその中の小見出しです」
と、文章の構造を示すためのタグです。
人間にとっては「目立つ文字」ですが、
ブラウザ・検索エンジン・スクリーンリーダーにとっては
「文書の見出し構造（アウトライン）」を理解するための重要な手がかりになります。
CSS で見た目はどうにでも変えられますが、
「これは見出しだ」という“意味”は、<h1>〜<h6> でしか表現できません。
h1〜h6 の「レベル」は見た目の大きさではなく“階層”
<h1>〜<h6> は、数字が小さいほど“上のレベルの見出し”です。
<h1> はページ全体のタイトル<h2> はその中の大きな項目<h3> は <h2> の中の小見出し
…というように、階層を表します。
例えば、ブログ記事の構造を考えてみます。
<h1>JavaScript 入門ガイド</h1>
<h2>1. JavaScript とは？</h2>
<p>JavaScript はブラウザ上で動くプログラミング言語です。</p>
<h3>1-1. どこで使われているのか</h3>
<p>Web サイトの動きやインタラクションに使われます。</p>
<h2>2. 開発環境を準備しよう</h2>
<p>まずはブラウザとエディタがあれば始められます。</p>
<h3>2-1. ブラウザを用意する</h3>
<p>Chrome や Firefox などのモダンブラウザを使いましょう。</p>
ここで重要なのは、
「大きく見せたいから <h1>」ではなく、
「文章のどのレベルの見出しか」でタグを選ぶ ことです。
見た目の大きさは CSS で変えればよくて、
見出しタグはあくまで“構造”のために使います。
h1 は「そのページで一番大きなタイトル」基本は 1 ページ 1 個
<h1> は、そのページの「一番上のタイトル」です。
ページ全体が何についてのページなのか
記事全体のタイトルは何か
を表すのに使います。
例えば、自己紹介ページならこうです。
<h1>山田太郎のポートフォリオ</h1>
<h2>プロフィール</h2>
<p>東京在住のフロントエンドエンジニアです。</p>
<h2>制作実績</h2>
<p>Web アプリやランディングページの制作を行っています。</p>
ここでのポイントは、<h1> は基本的に 1 ページに 1 つにする という考え方です。
最近の仕様では複数あっても技術的には許されますが、
初心者のうちは「ページのメインタイトルは 1 個」と決めておくと、
構造がシンプルに保てます。
h2〜h3 で「章」と「節」をきれいに分ける
<h2> は、<h1> の下の大きな区切り（章）<h3> は、<h2> の中の小さな区切り（節）
というイメージで使うと分かりやすいです。
例えば、技術記事の構造をもう少し丁寧に書くとこうなります。
<h1>HTML 見出しタグの使い方</h1>
<h2>1. 見出しタグとは何か</h2>
<p>見出しタグは文章の構造を表すためのタグです。</p>
<h3>1-1. 見た目ではなく意味を表す</h3>
<p>文字を大きくするためではなく、階層を表現するために使います。</p>
<h3>1-2. 検索エンジンやスクリーンリーダーへの影響</h3>
<p>正しい見出し構造は SEO やアクセシビリティにも重要です。</p>
<h2>2. h1〜h6 の使い分け</h2>
<p>h1 はページタイトル、h2 は大見出し、h3 は小見出しとして使います。</p>
ここで意識してほしいのは、
数字を飛ばさないこと です。
<h2> の次にいきなり <h4> を使う、
といったことは基本的にしません。
h1 → h2 → h3 → h4 と、
階段を一段ずつ降りていくイメージで使います。
見出しタグは「CSS で見た目を変える前提」で使う
初心者がよくやる間違いは、
「大きくしたいから <h1>」「ちょっと小さくしたいから <h3>」
と、見た目だけでタグを選んでしまうこと です。
正しい考え方は逆で、
「構造に合わせて <h1>〜<h3> を選ぶ」
「見た目は CSS で調整する」です。
例えば、全部同じ大きさにしたければ CSS でこうします。
<h1 class="heading">タイトル</h1>
<h2 class="heading">セクション 1</h2>
<h3 class="heading">セクション 1-1</h3>
.heading {
font-size: 1.5rem;
font-weight: bold;
}
これで、
構造は h1/h2/h3 で正しく表現しつつ、
見た目は同じスタイルにする
ということができます。
「見た目のためにタグを選ばない」
この感覚が身につくと、一気に HTML がプロっぽくなります。
見出しタグが“効いてくる”場面：SEO とアクセシビリティ
見出しタグを正しく使うと、
検索エンジンやスクリーンリーダーが
ページの内容を理解しやすくなります。
検索エンジンは、<h1> や <h2> の中身を
「そのページ・そのセクションの重要なキーワード」として扱います。
スクリーンリーダーは、
見出しだけを一覧表示したり、
見出し単位でジャンプしたりできます。
つまり、
見出しタグは「人間のため」だけでなく
「機械のためのナビゲーション」でもある ということです。
全部を <div> と <span> で書いてしまうと、
人間には見えても、機械には「ただの文字の塊」にしか見えません。
初心者として「見出しタグ」で絶対に掴んでほしいこと
見出しタグ（<h1>〜<h6>）は、
文字を大きくするためのものではなく、
「文章の構造と階層を表現するためのタグ」 です。
ページ全体のタイトルは <h1>（基本 1 ページ 1 個）
大きな区切りは <h2>、その中の小見出しは <h3>
数字は飛ばさず、階層を意識して使う
見た目は CSS で変え、タグは“意味”で選ぶ
あなたが <h1> を書くときに
「これは本当にこのページの一番大きなタイトルか？」<h2> を書くときに
「これはその下の大きなセクションの見出しか？」
と一度でも自問できるようになったら、
もう見出しタグを“装飾”ではなく“構造”として扱えている証拠です。