こんにちは！Web制作の世界へようこそ。画面の中に自分の書いた文字が並ぶ瞬間って、何度味わってもワクワクしますよね。
今日は、HTMLの基礎中の基礎でありながら、実はWebサイトの「骨格」を決める一番大事な役割を持つ「見出し要素（h1〜h6タグ）」についてお話しします。
「見出しなんて、文字を大きく太くするだけでしょ？」と思っているとしたら、ちょっと待ってください！実はこれ、ただの装飾じゃないんです。Webサイトの「地図」を作る、とても重要な役割があるんですよ。
—
見出しタグは「本の目次」と同じです
想像してみてください。あなたは今、本屋さんで分厚い専門書を手に取っています。中身をチラッと見る時、どこを確認しますか？そう、「目次」ですよね。
- 第1章：HTMLの基本
- 1-1：見出しタグってなに？
- 1-1-1：h1とh2の使い分け
この構造があるからこそ、私たちは「あ、ここにはこんな内容が書いてあるんだな」と一瞬で理解できます。Webサイトの見出しタグもこれと全く同じです。
コンピューター（Googleの検索ロボットや、目の不自由な方が使う音声読み上げソフト）は、Webページを人間のように「なんとなく眺める」ことはできません。だからこそ、私たちがHTMLというルールを使って「ここが大事なタイトルだよ！」「ここはその中の小さなトピックだよ！」と、階層構造を教えてあげる必要があるんです。
—
h1からh6まで、どう使い分ける？
HTMLには `
` から `
` まで6段階の見出しが用意されています。ポイントは「数字が小さいほど、偉い（重要）」というルールです。
`
`：そのページで一番大切なタイトル。 ページにつき1つだけ使うのがルールです。本で言えば「本のタイトル」ですね。
`
`：大きな章のタイトル。 「第1章」のようなイメージで、ページの中で何度使ってもOKです。
`
`：`
`の中の小見出し。 「1-1」のようなイメージです。
`
`〜`
`：さらに細かい補足説明。 使う機会は意外と少ないですが、複雑な情報の時に役立ちます。
悪い例：デザインだけで選んでしまう
「h2だと文字が大きすぎるから、h4を使っちゃえ！」
これ、初心者の頃はやりがちですが、やめましょう。見出しは「見た目のサイズ」ではなく「情報の重さ」で選ぶのがプロの流儀です。見た目はCSS（デザイン用の言語）で後からいくらでも調整できますから、安心してくださいね。
—
実際に書いてみましょう
エディタを開いて、こんなふうに書いてみてください。
おいしいコーヒーの淹れ方
用意するもの
まずはコーヒー豆とドリッパーを準備しましょう。
豆の選び方
浅煎りから深煎りまで、好みを見つけましょう。
お湯の温度
90度くらいがベストですよ。
このように「h1→h2→h3」と順番に並べることで、読み手もロボットも「なるほど、この記事はこういう構成なんだな」と迷子にならずに済みます。
—
なぜこれが重要なのか？
「別に適当にタグを選んでも、見た目は変わらないじゃん」と思うかもしれません。でも、ここを丁寧にやるだけで、二つの大きなメリットが生まれます。
1. SEO（検索エンジン最適化）に強くなる
Googleのロボットがサイトを巡回した時、見出しが綺麗に整理されていると「このサイトは情報の整理が上手で、ユーザーに親切だ！」と判断して、検索結果で上位に表示されやすくなります。
2. アクセシビリティ（誰にでも優しい）が向上する
視覚障害のある方は、音声読み上げソフトを使ってページを読みます。その際、見出しが適切に使われていると「見出しを飛ばして次の章へ行く」といった操作がスムーズにできるようになります。
—
最後に：完璧じゃなくて大丈夫！
ここまで読んで「うわ、ルールが多くて難しそう…」と感じましたか？大丈夫ですよ。最初は誰だって、「あれ、これh2だっけh3だっけ？」と迷うものです。
大切なのは、「これは誰かに伝えるための目次を作っているんだ」という意識を持つこと。それだけで、あなたの書くHTMLは、ただのコードから「相手を想うメッセージ」に変わります。
もし迷ったら、「もしこのページを本にするなら、ここは第何章だろう？」と一度立ち止まって考えてみてください。その「ひと手間」が、あなたのWebサイトを世界一読みやすいものにしてくれますよ！
さあ、次はどんなコンテンツを作りましょうか？応援しています！
コメント