【 HTML入門 】見出しタグh1〜h6の使い分け方と効果を徹底解説

簡単そうなのに、使ってみるとよく分からなくなってしまうタグといえば・・・見出しタグ。

内部SEOにも影響してくるものなので、適当に使わずに見出しタグについてしっかりと理解をした上で使うようにしましょう。

見出しタグとは？

サイトやブログを訪れるユーザーと検索エンジンにページの文章構造を正しく伝えるために使用するhタグのことです。見出しタグはh1〜h6まであり数字が小さい方が重要度が上がります。

見出しタグで囲まれたテキストは、CSSでデザインを指定しなくても、ブラウザが勝手に大きさや太さなどを変更します。

HTML

<h1>h1です</h1>
<h2>h2です</h2>
<h3>h3です</h3>
<h4>h4です</h4>
<h5>h5です</h5>
<h6>h6です</h6>
<p>pです</p>

見出しタグの効果

見出しタグを使って書かれた文章と、使わずに書かれた文章を見比べると、見る人にとって、いかに見出しタグが重要かが分かります。

下の画像の左側の方はpタグのみを使って書かれたものです。

HTML

<p>初めてのホームページ制作</p>
<p>考えておくこと</p>
<p>サイトを作る目的として、よくあるのは・・・</p>
<p>用意するもの</p>
<p>サイト内で使うロゴを用意しましょう。もしも・・・</p>

それに対して右側の方は、見出しタグとpタグを使って正しく書かれたものです（h1はcssで少し装飾しました）。

HTML

<h1>初めてのホームページ制作</h1>
<h2>考えておくこと</h2>
<p>サイトを作る目的として、よくあるのは・・・</p>
<h2>用意するもの</h2>
<p>サイト内で使うロゴを用意しましょう。もしも・・・</p>

ルール

正しい使い方をしないとユーザーにとって優しくないサイトになるばかりか、検索エンジンの評価も下がってしまう可能性があるので、以下のルールを頭に入れて使うようにしてください。

見出しタグの順番を守る

見出しタグはh1から順番に使っていきます。

ページの文章構造を正しく伝えるために使うので、例えばh1の後にいきなりh3がきたりすることがないように気をつけましょう。

h1は1ページに1つ

h1タグは基本的には1ページに1つだけにします（複数使用しても問題はないみたいですが、文章構造が分かりにくくなるため）。

ページ内の1番重要なテキストに使用するのでトップページではサイトタイトルに、そして記事ページなどでは記事タイトルに使用したりしましょう。

h2〜h6は1ページに複数OK

h2〜h6の見出しタグは何度使っても問題ありません。

ただし上にも書いてある通り、順番だけは必ず守るようにしましょう。

文章構造と関係ない使い方をしない

文字を大きくしたいとか、強調したいという理由では見出しタグは使わないようにしましょう。

あくまでも見出しタグは見出しのためだけに使ってください。

まとめ

見出しタグについての記事、いかがでしたでしょうか。

HTML関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。