【HTML】見出し要素

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の文字サイズを調整しましょう。

参考