【HTML】見出しタグの役割は？意味・例・使い分け・注意点を解説

見出しタグとは?

見出しタグのhとは「heading」の略で、見出しを意味するタグです。

文章の章題や節題を記述し、その見出しの大きさに合わせて<h1>タグから<h6>タグまで設定できます。

<h1>タグが一番大きな見出し（大見出し）になり、以下数字が小さくなるにしたがって、下位の見出し（小見出し）という意味です。

同じ数値のものが複数ある場合、は同じランクとして扱われます。

見出しの数字が小さくなるにしたがって文字が細く小さくなりますが、ブラウザによりその割合は異なります。

この大きさを指定するためにはスタイルシートを使用することが必要です。

1つのセクションの中で最初の見出しの後、低いランクの見出しが続く場合には、そのセクションの一部であるサブセクションを開始されたものとみなされます。

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTML&CSSを学びたい方必見

見出しタグの例

h1からh6の見出しタグのHTMLコードは以下の通りです。

<h1>h1見出し</h1>
<h2>h2見出し</h2>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<h5>h5見出し</h5>
<h6>h6見出し</h6>

ブラウザでどのように表示されるのかみてみましょう。

ブラウザで見出しを表示させてみましたが、h1が一番大きくて、h6が一番小さく見えます。

【SEOに重要】見出しタグの使い分け・注意点

h1タグの使用回数は1回のみ

h1タグは最も大きな見出しに使用するタグとなっています。

そのため、h1タグは1ページにつき一度だけ使用するようにしましょう。

h1タグはWebサイトタイトルや記事タイトルに利用することが一般的となっています。

h2タグ~h6タグは何回利用しても大丈夫

h2タグ~h6タグは何度使用しても大丈夫です。

しかし、h1タグからh6タグは順番通りに使用するようにしましょう。

見出しタグの順番を守ること

見出しタグは<h1>から始まり<h6>までありますが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らないといけません。

繰り返しになりますが、見出しタグはコンテンツの階層構造を正しく示すために使うものです。

見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになります。

それでは、結果的にSEOにマイナスの影響を与えてしまいます。

SEOを学びたい方必見

SEOに強い見出しの作り方のポイント

コンテンツの内容を一言でまとめること

見出しは、コンテンツの内容を一言で簡潔にまとめる必要があります。

メリットは「ユーザーが流し読みでもコンテンツを理解できる」、「ユーザーが必要な情報がのっているかどうかをすぐ判断できる」というものです。

見出しは本文よりも大きく表示され、流し読みするユーザーの目にも入ります。

したがって、見出しがきちんとコンテンツの内容を一言で表していると、ユーザーがコンテンツを理解するのに役立ちます。

また、目次が出るような設定をしている場合、見出しは目次にも表示されます。

多くのユーザーはそのページに知りたい情報がのっているかどうかを目次の見出しを見て判断するのです。

目次を見た際に、コンテンツの内容を一言でまとめられた見出しが表示されていると、ユーザーは知りたい情報がのっているかどうかをすぐに判断することができます。

一目で見て理解できる言葉を使うこと

見出しは、一目で見て理解できる言葉を使う必要があります。

その理由は、ユーザーの時間を奪わないようにするためです。

ユーザーは、情報を早く知りたいという気持ちを持っています。

そのユーザーが一目で見出しを見て、コンテンツの内容を理解できなければ、知りたい情報がのっているかどうかの判断がすぐにできず、読むのをやめてしまいます。

その結果、サイトの離脱率は上がり、SEOに弱くなってしまうのです。

ユーザーの早く知りたいという気持ちにこたえ、見出しは一目でわかる言葉を使うようにしましょう。そうすれば、ユーザーの離脱率が低く、SEOに強いサイトが出来上がります。

適切にキーワードを入れること

キーワードを見出しに不自然に詰め込むのはやめましょう。

キーワードを不自然なほど詰め込むと、ユーザーが読みにくくなり、結果的にSEOに弱くなるからです。

キーワードが入っているかどうかよりも、ユーザーにとって良い見出しかどうかを優先して考えるようにしましょう

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

まとめ