【HTML入門】 見出しの作り方

Webページには、サイトのメインタイトル、記事のタイトル、章のタイトルなど、複数のタイトル(ヘッダー)があります。

それらをh1~h6タグを利用してうまく順位付けて行きましょう。

h1~h6タグ

これらは、ヘッダーを示していて、数字が小さいほど上位のヘッダーになります。

つまり、サイトのメインタイトルなど、そのページで最も大々的な見出しにはh1を、章のタイトルのような、そこそこ大きな区切りにはh2を、という感じで指定していきます。

このタグは、h6まで存在します。

See the Pen html header by Totori (@souki202) on CodePen.

h3以降はそれより小さい規模のヘッダーに利用していくと良いでしょう。

h1は、そのWebページの中で普通は1つか2つ程度しか存在しません。最も大きな見出しなためです。もしh1が複数できるような状態になったら、それはWebページを分けたほうがわかりやすくなると思います。

h1~h6の使い分け

h1の使い所

よくある使い所は、

• トップページのロゴ
• 各記事のメインタイトル

あたりが多いです。

h1はそのページがどんなページかを示すもののため、どんなページかが表現されているものに利用されます。

また、ロゴの場合は画像が多いと思いますが、その場合は画像にalt属性を設定します。

<h1>
    <img src="..." alt="ProgText">
</h1>

h2以降

章や節に対して付けます。例えば、下のサンプルのような感じです。

See the Pen html h1 to h6 by Totori (@souki202) on CodePen.

ここで、正確に階層構造になっているべきです。つまり、

<h1>...</h1>

<h2>...</h2>
<h3>...</h3>

<h2>...</h2>
<h4>...</h4> <!-- h3が飛んだ -->

のようにならないよう注意が必要です。

見出しの例

基本的には、文書を書く時と同じような間隔でつければ良いです。例えば、次のように見出しをつけます。

1. h1 Title
   1. h2 はじめに
   2. h2 HTMLとは
      1. h3 xxの使い方
      2. h3 yyの使い方
      3. h3 xxの使い方
         1. h4 特例
         2. h4 注意点
   3. h2 CSSと…
      1. h3 読み込み方法
      2. h3 テスト方法
   4. h2 おわりに

上の例のように、見出しは入れ子構造になり、入れ子にする際はh1→h2→h3というふうに1段ずつ下げていきます。h1の次がh3になるなど、下げるときに階層が飛ぶのはNGです。

なぜ適切な見出しの順位を付けるか

見出し順位を付けるのは、もちろん人が見たときに整理されていたらわかりやすいのもそうですが、SEO対策にも重要です。

検索エンジンはWebページの中身をみて、キーワードは何か、どんな内容かを判断します。そのときに見出しが何かもチェックされるため、ページの内容との関連性を正確に伝える必要があります。

最も重要なのはh1タグです。ユーザに対して何を伝えたいのか、どんな内容を知りたいかを相手目線に立って付ける必要があります。

まとめ

h1~h6タグは、見出しに利用されます。h1は、通常Webページ内に1個か2個程度しか入れません。

特にh1はSEOへの影響が強いので、適切な見出しを設定していきましょう。