HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎7. h1〜h6要素-見出しをつける

      2017/07/11

この章について

下記のbase-html01.zipをダウンロードして実際に記述してみましょう。
base-html01.zip

h1〜h6要素

初期値はブロックレベル要素です。 見出しはh1〜h6要素まであります。
入れ子にできるのは、テキストまたはインライン要素(a, img, spanなど)、改行(br)のみです。
h1(大見出し)h2(中見出し)h3(小見出し)というようにレベル分け(アウトライン)されます。すべての見出しを使う必要はありませんが、h1は必ずページごとに1つ記述しましょう。下記の図のように「見出し」にはルールがあり、h1があればh2が、h2があればh3が使用できます。 見出しのアウトライン

良い見出しのアウトライン

悪い見出しのアウトライン

初期値では文字サイズに違いがあるため、見出しの大きさで使い分けないようにしましょう。文字の大きさなどの装飾はCSSで設定できます。最初はh1をページに1つ設定し、必要に応じてh2以降を使用すると良いでしょう。
HTML5からの新しい要素(airticle, section, asideなど)で囲んだ場合は、h1を含むアウトラインを複数設定できます。こちらの要素に関しては48章で解説していきます。

まとめ

  • 見出しは順序に気をつけましょう
  • 必ずページにh1を1つ使用しましょう
  • 見出しを装飾目的で使用してはいけません

 - HTML・CSS