HTMLの見出し、どこまで深く潜る？ `h1`タグ再利用のリアルな正解
Web制作を始めたばかりの頃、「見出しタグ（h1〜h6）って、どうやって使い分けるのが正解なんだろう？」と悩んだことはありませんか？
「h1はページに1つだけって聞いたけど、じゃあセクションごとにh1を使っちゃダメなの？」
「見出しレベルが混ざると怒られる気がする…」
そんなふうに迷ってしまうあなたへ。今日は、HTMLの「構造」という少し硬い話を、もっと身近なものに置き換えてお話ししますね。大丈夫、ルールは意外とシンプルで、そして実はとっても自由なんです。
—
見出しは「本の目次」と同じ。迷ったら「階層」を意識しよう
まずは、見出しタグを「本」や「雑誌」の構成に例えてみましょう。
- h1: 本のタイトル（表紙）
- h2: 大きな章（第1章、第2章）
- h3: 節（章の中の細かいテーマ）
基本的には、この「大きな入れ物から小さな入れ物へ」という順番を守るのが、検索エンジン（Googleさんなど）にとっても、画面読み上げソフトを使う方にとっても、一番わかりやすい「地図」になります。
よくあるつまずきポイント：`section`や`article`の中の`h1`ってどうなの？
HTML5という規格が登場したことで、実は`
かつては「ページ内でh1は絶対に1つ！」という鉄の掟がありましたが、実は現在、技術的には各セクションごとに`h1`を使っても間違いではありません。
でも、ここで現場のリアルなアドバイスを一つ。
「技術的にOKだから」といって、やみくもに`h1`を乱用するのはおすすめしません。なぜなら、「h2から始めるのが最も事故が少ないから」です。
—
実践！現場でよく使う「見出しの設計」パターン
それでは、実際のコードを見てみましょう。迷ったときは、この書き方を参考にしてみてください。
美味しいコーヒーの淹れ方ガイド
豆の選び方
まずは新鮮な豆を用意しましょう…
浅煎りと深煎りの違い
浅煎りは酸味が強く、深煎りは苦味が際立ちます。
なぜ「h2スタート」が安全なの？
例えば、WordPressやブログツールでは、タイトルが自動的に`h1`として出力されることがほとんどですよね。そのあと、本文の中でまた`h1`を書いてしまうと、構造が少し複雑に見えてしまうことがあります。
「ページ全体のタイトルがh1なら、中身はh2から始める」
このルールを自分の中で決めておくだけで、どんなにページが複雑になっても迷子にならなくなりますよ。
—
迷ったら「目次」をイメージしてみる
それでも迷ってしまったら、一度ブラウザを閉じて、紙とペンを持って「このページの目次」を箇条書きにしてみてください。
1. 美味しいコーヒーの淹れ方（これがh1）
1. 豆の選び方（これがh2）
1. 浅煎りと深煎りの違い（これがh3）
2. 抽出のコツ（これがh2）
この「親・子・孫」の関係性が、そのままHTMLのタグ（h1→h2→h3）になっていれば、それは誰が見ても分かりやすい完璧な文書構造です。
—
まとめ：正解は「誰かにとって親切な構造」にある
HTMLのルールは、ただのコードの書き方ではなく、「情報をどう届けるか」という優しさの設計図です。
- `article`や`section`は、あくまで「情報のまとまり」を作るための箱。
- 見出しレベル（h1〜h6）は、その箱の中の「優先順位」を示すラベル。
- 迷ったら「h2からスタートする」という基本に立ち返る。
最初は難しく感じるかもしれませんが、パズルを組み立てるように「これは大見出し、これはその中のトピック」と整理していく作業は、慣れるととっても楽しいですよ。
あなたの書いたHTMLが、誰かにとって読みやすく、親切なものになりますように。応援しています！
コメント