見出しタグ(h1〜h6)の「やっていいこと・ダメなこと」を完全攻略しよう!
Web制作を始めたばかりのみなさん、こんにちは!HTMLの学習、順調ですか?
タグを覚えるのは楽しいけれど、「これってどこに書いていいの?」「ここにこのタグを入れても怒られないかな?」と迷う瞬間、ありますよね。
今日は、Webページの「顔」とも言える見出しタグ(h1〜h6)について、その中身(コンテンツモデル)のルールを紐解いていきます。難しい専門用語は抜きにして、一緒に整理していきましょう。大丈夫、全然難しくないですよ!
—
見出しタグは「本の章立て」をイメージしよう
まず、`h1`から`h6`までの見出しタグを想像してみてください。これらは、Webページという「本」の目次のようなものです。
- h1: 本のタイトル(一番大切!)
- h2: 大きな章のタイトル
- h3: 章の中の節
このように、見出しタグは「情報をグループ分けして、読みやすくするための看板」です。看板の中に、いきなり「別の看板」を立てることはありませんよね?この感覚が、HTMLのルールを理解する鍵になります。
—
結論:見出しタグには「文字や装飾」だけを入れる
見出しタグの中に入れていいのは、基本的に「フレージングコンテンツ」と呼ばれる要素だけです。
「フレージングコンテンツ」と聞くと身構えてしまいますが、要は「文章の中に自然に混ざるもの」だと思ってください。
OKな例(中に入れてもいいもの)
- ``:文字の色を変えたいときなど
- ``:リンクを貼るとき
- ``:文字を強調したいとき
- `
`:ちょっとしたアイコンやロゴ(あくまで装飾の一部として)
NGな例(中に入れてはいけないもの)
- `
`:大きな箱(ブロック要素)
- `
`:段落
- `
- `や`
- `:リスト
- 他の`
`〜`
` 「見出しの中に、段落やリストという『重たい荷物』を入れてはいけない」と覚えておくと、とても分かりやすいですよ。 — なぜ「ダメ」なの?
例えば、`
タイトル
` のように書いてしまうとします。
これ、ブラウザ(Chromeなど)は頑張って表示してくれますが、HTMLのルールとしては「NG」なんです。なぜなら、「見出し」というひとつの看板の中に、「段落」という別の文書構造を押し込んでいるからです。これは、お弁当箱の中に、別の大きなお弁当箱を無理やり入れているようなもの。中身が溢れてしまって、コンピューターが「このページ、一体何が一番大事なの?」と混乱してしまいます。
SEO(検索順位)の観点からも、Googleのロボットがページ構造を正しく理解できなくなるので、なるべく避けるのが吉です。
—
良い例と悪い例を比較してみよう
実際にコードで見てみましょう。
× やってはいけない書き方
素晴らしいWebサイトのタイトル
メニュー
◯ 正しい書き方
ようこそ、私のWebサイトへ!
おすすめのサービス一覧
- サービスA
- サービスB
—
まとめ:迷ったら「看板の中身」を想像して
もし、見出しタグの中に何かを入れようとしたとき、「これは見出しの一部かな?」と自問自答してみてください。
- それが「文字を飾るためのもの」なら、たいてい大丈夫。
- それが「別の構造を作るためのもの(箱やリスト)」なら、外に出す。
このシンプルなルールを守るだけで、あなたの書くHTMLは驚くほど綺麗で、Googleにも人にも優しい「プロのコード」に近づきます。
最初は誰だって迷います。間違えても大丈夫。修正しながら、少しずつ「HTMLの心地よいリズム」を掴んでいきましょうね。応援しています!
- `

コメント