Web制作の入り口に立った皆さん、こんにちは！
HTMLを学び始めると、`
`や`
`といった「見出しタグ」に必ず出会いますよね。「とりあえず文字を大きくしたいからh1を使う」なんて、最初は誰でも通る道です。でも、実はこの見出しタグたち、Webサイトという「街」を案内するための、とてつもなく重要な「看板」なんです。
今日は、ただの文字装飾だと思われがちな見出しタグを、Google検索エンジンや、目が見えないユーザーにも正しく伝えるための「正しい使い方」について、一緒に紐解いていきましょう。
—
見出しは「本の目次」と同じ。迷子にさせないためのルール
皆さんが書店で本を手に取ったときを想像してみてください。
表紙には大きなタイトル、中を開けば「第1章」「第2章」といった大きな見出しがあり、その中に「1-1」「1-2」といった小さな項目がありますよね。
もし、その本が「第1章」の次がいきなり「第5章」になっていたり、全部が同じ大きさの文字で書かれていたら、どこに何が書いてあるか分からなくて、読むのを諦めてしまいませんか？
HTMLの見出しタグもこれと全く同じです。
- `
`
: 本のタイトル（そのページで一番大事！） - `
`: 大きな章のタイトル ` `: 章の中の節（セクション） ` `〜` `: さらに細かい補足 この順番をバラバラに飛ばしたり、見た目だけで選んだりすると、Webサイトという「本」の目次がめちゃくちゃになってしまうんです。 — セクションタグと見出しの「相思相愛」な関係
最近のHTMLでは、`
`や` `といった「箱（コンテナ）」を使うことが増えました。これらを使うとき、セットで覚えておいてほしい鉄則があります。 「セクション（箱）には、必ず見出し（看板）を立てる」
例えば、こんなイメージです。
製品紹介
最新のスマートフォン
このスマホは驚くほど軽くて……
このように、箱と見出しをセットにしておくと、検索エンジン（Googleなど）は「おっ、ここは製品紹介のエリアなんだな」「ここにはスマホのことが書いてあるんだな」と、サイトの構造を完璧に理解してくれます。結果として、SEO（検索順位）にも良い影響が出るんですよ。
—
アクセシビリティ：誰にとっても「優しい」サイトにするために
「でも、文字の大きさはCSSで変えられるし、どれを使っても一緒じゃないの？」そう思うかもしれません。でも、ここで大切なのは「機械の声」です。
目の不自由な方々は、PCやスマホの画面を読み上げるソフト（スクリーンリーダー）を使っています。このソフトを使っている人は、見出しを頼りに「今のページにはどんな内容があるのか」をジャンプしながら探します。
もし、見出しの階層がデタラメだと、ソフトは内容を正しく整理して伝えられません。「見出しを正しく使う」ことは、誰かにとっての「情報のバリアフリー化」そのものなんです。
—
実践！やってはいけないNG例と、正しい書き方
最後に、ついついやりがちな「NGコード」と「OKコード」を見比べてみましょう。
❌ やってはいけない例（見た目だけで選ぶ）
サイトのタイトル
これはh4だけど、h2として使いたいな…
これだと、検索エンジンは「あれ？第2章はどこへ消えたの？」と混乱してしまいます。
✅ おすすめの書き方
サイトのタイトル
会社概要
沿革
2023年に設立されました。
—
最後に：小さな積み重ねが「プロ」への第一歩
「見出しのレベルを合わせるだけ」のことですが、実はこれ、ベテランのエンジニアでも気を抜くと間違えてしまうほど奥が深い部分です。
最初は少し窮屈に感じるかもしれませんが、「文書の構造を整える」という意識を持つだけで、あなたの書くコードは驚くほど読みやすく、そして誰にとっても優しいものに変わります。
もし途中で「あれ、ここでh3を使っていいんだっけ？」と迷ったら、その時は「このページを読み上げるなら、どういう順番で案内すると親切かな？」と、画面の向こう側のユーザーを想像してみてください。
皆さんのサイト制作が、今日も素敵なものになりますように。応援しています！
コメント