HTMLの見出し要素とは、名前の通り「見出しを作るため要素」のことです。
「見出しタグ」と呼ぶ場合もあります。
見出し要素にはh1~h6の6種類があります。
<h1>ここに見出し名が入ります</h1> <h2>ここに見出し名が入ります</h2> <h3>ここに見出し名が入ります</h3> <h4>ここに見出し名が入ります</h4> <h5>ここに見出し名が入ります</h5> <h6>ここに見出し名が入ります</h6>
h1が一番大きな見出しで、h6が一番小さな見出しになります。
見出し要素を利用し、ウェブページの文章に階層構造を作る事で、論理的な記事を構成する事ができます。
実際にウェブページの文章を作成する際は、以下の様に利用します。
<h1>食べ物の種類</h1> <h2>和食</h2> <h3>和菓子</h3> <h2>洋食</h2> <h3>ピザ</h3> <h2>中華</h2> <h3>ラーメン</h3> <h4>醤油ラーメン</h4> <h4>塩ラーメン</h4>
一番大きな見出しであるh1はサイトや記事のタイトルに使用されます。
h2は大見出し、h3は中見出し、h4は小見出しになります。
各見出しの下に、通常の文章(上記の例では食べ物の解説など)を記します。
見出し要素は6種類全てを利用する必要はありません。
見出し要素の注意点
見出し要素を使う上での注意点をいくつか紹介します。
見出し要素は6種類
見出し要素はh1からh6の6種類です。
h0やh7はありません。
見出し要素は順番に使う
見出し要素の数字を飛ばさない様にしましょう。
例えば、h2の下に使う見出しはh3になります。h3の次はh4です。
数字を飛ばしても、特に問題なくページは表示されますが、適切ではありません。
デザインとは無関係
見出し要素に限らず、HTMLの役割はあくまで文章の構造を作る為のものであって、デザイン(色や文字サイズ)の変更を行うものではありません。
デザインは、基本的にCSSを使って調整します。
なので、「h1だと文字のサイズが大きすぎるから、h2を使う」というような使い方は適切ではありません。
そのような場合は、CSSを使い、h1の文字サイズを調整しましょう。