【HTML】h1〜h6タグの使い方のご紹介！使用する際の注意点も解説！サンプル付き！

HTMLでは、コンテンツに見出しをつけたい時、h1〜h6タグを使用します。

今回は、このh1〜h6タグについて解説していきます。使用する際の注意点も解説していますので、普段なんとなく使用していたという方は、是非ご確認ください。

h1〜h6タグとは？

h1〜h6タグとは、HTMLで見出しを表現する時に使用するタグです。「エイチワン」〜「エイチシックス」と読みます。

種類は、h1〜h6と、6種類あります。

一番重要な見出しは、h1タグを使用し、数字が大きくなるほど重要度が下がっていきます。基本的には、h1から順番に使っていきます。また、基本的にh1はページ内で1回のみの使用、h2以下は、何回使用しても大丈夫です。

<h1>今日のイチオシメニュー</h1>

<h2>シェフの気まぐれパスタ</h2>
<p>当店シェフが気まぐれに作るパスタです。何が出てくるかはお楽しみに!</p>
  
<h2>チョコケーキ</h2>
<p>ベルギー産の高級チョコレートをふんだんに使用したチョコケーキは、絶品です!</p>

上記のサンプルでは、h1タグとh2タグを使用していますが、重要度の高い順にh1〜h6タグを上手に使いましょう。

デフォルトの見出しタグのサイズについて

デフォルトだと、各h1〜h6タグのフォントサイズが違うのが特徴です。h1が一番大きく、それ以降はどんどん小さくなっていきます。

<h1>テキストが入ります</h1>
<h2>テキストが入ります</h2>
<h3>テキストが入ります</h3>
<h4>テキストが入ります</h4>
<h5>テキストが入ります</h5>
<h6>テキストが入ります</h6>

上記のような感じで、それぞれ、タグによってサイズが変わってきます。

お悩みさん

あれ？私のPCだと、h1〜h6のどれを使ってもサイズに違いがないのですが、バグ？

このような場合は、読み込ませているリセットCSSが、デフォルトの見出しのサイズを打ち消している場合があります。

見出しのサイズがどれを使っても同じになるという方は、ここを疑ってみてください。

見出しタグを使用する際の注意点

見出しタグを使用する際、いくつか注意点がありますので、ご紹介しておきます。

使う順番をメチャクチャにしない事

基本的には、h1から順番に使用していくと説明しました。ですが、文書構成的にいきなりh4を使用したりするのはあまり良くないので、避けるべきでしょう。

文字数を多くしすぎない

見出しタグは、特に文字数制限などは設けられていませんが、見出しが長ければ長くなるほど、キーワードの重要性が薄まる可能性があります。

目安としては、長くても、40文字程度に収めるようにしてみましょう。

特にh1タグでは、意識したいポイントとなります。

見出しタグで画像を使用する場合は、必ずalt属性を指定

見出しを画像で表現したい場合もあると思います。見出しタグに画像を使用する事は、基本的に問題ありません。

ここで、注意したいのが、imgタグのalt属性の指定です。人間は、画像を見れば書いてある文字を読むことが出来ますが、クローラーは、画像内の文字を読み取る事はできません。alt属性に何も指定されていなければ、h1の内容が空白であると認識されてしまうので注意が必要です。
※alt属性について詳しく知りたい方は、こちらの記事をご確認ください。

<h1><img src="画像のパス" alt="画像の代わりになるテキストを入力(見出しテキスト)"></h1>

見出しタグで、画像を使用する場合は、上記のサンプルのように書いてください。

h1タグは、基本的にページ内に1つだけにする

h1タグは、ページ内の最も重要な見出しに使用すべきタグですが、何度も使用するのは基本避けたほうが文書構成的に美しいです。

SEOの観点からは、下記の動画のように、特にマイナスになる事は無いと言われています。

しかし、読み手にも、検索エンジンにも伝わりにくくなるのは間違いないと思いますので、意識したいポイントです。

まとめ

今回は、h1〜h6の見出しタグについて執筆しました。このタグは、ページ内でほぼ必ずと言っていい程出てくるタグです。

種類が6種類あるので、なんとなく使っていた方は、是非参考にしていただければ幸いです。