こんにちは！フロントエンドの世界へようこそ。
HTMLを学び始めると、必ずと言っていいほどぶつかるのが`
`から`
`までの「見出しタグ」の使い方です。「全部`
`じゃダメなの？」「どこで数字を変えればいいの？」と悩んだことはありませんか？
実はこれ、単なる「文字を大きくする道具」ではありません。Webサイトという「物語」をGoogle検索やスクリーンリーダー（視覚障がい者のための読み上げソフト）に正しく伝えるための、非常に大切な「案内板」なんです。
今日は、この見出しの階層構造（アウトライン）について、専門用語を抜きにして、一緒に紐解いていきましょう！
—
1. 本の「目次」をイメージしてみよう
まずは、Webサイトを「本」だと思ってください。
- `
`：本のタイトル
（一番大切！） - `
`：大きな章のタイトル（第1章、第2章…） ` `：章の中の節（1-1、1-2…） ` `：さらにその中の項目 これらがバラバラに並んでいたら、読者は混乱してしまいますよね。いきなり「第5章」から始まる本なんてありません。HTMLの階層構造もこれと同じで、「上から順番に、入れ子にしていく」のが基本ルールなんです。 2. 「アウトラインアルゴリズム」って難しくない？
昔のHTMLには「セクションごとに`
`を使っていい」という少し複雑なルールがありました。でも、今の現場では「見出しの数字は1から順に飛ばさず使う」という、もっとシンプルで確実なやり方が推奨されています。
例えば、こんな感じです。
美味しいコーヒーの淹れ方
必要な道具
コーヒー豆の選び方
ドリッパーの種類
美味しい淹れ方のステップ
お湯の温度にこだわろう
蒸らしの時間を計る
どうでしょう？これなら、誰が見ても「コーヒーの淹れ方」という大きなテーマの中に、どんなステップがあるのか一目瞭然ですよね。
つまずきポイント：数字を飛ばさないで！
よくある間違いが、デザイン上の「見た目」を優先して、いきなり`
`の次に` `を使ってしまうことです。これだと、ブラウザや検索エンジンは「あれ？第3章はどこに行ったの？」と迷子になってしまいます。階段を一段飛ばしで降りるようなものなので、できるだけ順番に使うのがコツですよ。 — 3. `section`タグとセットで考えると「安心感」が増す
HTML5から登場した`
`タグを使うと、情報のまとまりをより明確にできます。これを使うと、コードの整理がグッと楽になります。 よくある質問（FAQ）
配送について
配送は注文から3日以内に行います。
返品について
返品は1週間以内にお願いします。
このように、`
`で囲むことで、「ここから先は『よくある質問』の話ですよ」とコンピューターに教えることができます。こうして整理整頓されたHTMLは、SEO（検索エンジン最適化）にも強く、誰にとっても優しいWebサイトになります。 —
まとめ：あなたのコードは、誰かの「道しるべ」
見出しタグを正しく使うということは、「Webサイトを訪れるすべての人が、迷わずに目的地にたどり着けるように案内板を立てる」という、とても思いやりのある作業なんです。
もし、今書いているコードで「どの数字を使えばいいのかな？」と迷ったら、こう自分に問いかけてみてください。
「この見出しは、一つ上の見出しの『子供』かな？ それとも『兄弟』かな？」- 子供（詳細情報）なら、数字を大きくする（h2 → h3）
- 兄弟（別のトピック）なら、数字はそのまま（h2 → h2）
これさえ覚えておけば、もう大丈夫！完璧にできなくても、少しずつ意識するだけであなたの書くコードは驚くほど読みやすく、美しくなっていきますよ。
これからも一緒に、Web制作を楽しんでいきましょうね！応援しています。
コメント