見出しタグ

見出しの深さ

見出しはページの目次になる

見出しタグは、文章のかたまりに名前を付けるためのタグです。h1 から h6 まで 6 段階あって、数字が小さいほど大きなまとまりを表します。h1 はそのページで一番大きな見出しで、ふつう 1 ページに 1 つだけ置きます。いまページにある名前の見出しがそれですね。

その下にぶら下がる中くらいのまとまりには h2 を使います。さらに細かく分けたいときだけ h3 に進みます。

ここで気をつけたいのは、見た目の大きさで選ばないことです。文字を大きくしたいから h1、小さくしたいから h4、という選び方をすると、ブラウザや検索エンジンにページの中身が正しく伝わりません。大きさはあとから CSS でいくらでも変えられます。見出しは「大きさ」ではなく「まとまりの深さ」で選びます。

3 つの見出しを立てよう

いまのページには名前の h1 しかありません。ここに自己紹介、趣味、経歴という 3 つのまとまりを作ります。どれも名前の下にぶら下がる同じ深さのまとまりなので、3 つとも h2 で書きます。

<h2>自己紹介</h2>

中身はまだ書かなくて大丈夫です。まずは骨組みだけを並べます。ここから先のレッスンで、この 3 つの見出しの下を少しずつ埋めていきます。

課題

  1. h1 の下に h2 で「自己紹介」の見出しを追加する
  2. 続けて h2 で「趣味」「経歴」の見出しを追加する
  3. h1 は増やさず 1 つのままにする

ヒント

index.html
プレビュー

できているか

  • h2 の見出しが 3 つある
  • 最初の h2 が「自己紹介」になっている