【HTML】見出しタグの使い方【h1～h6の設置注意点】
Kこんにちは！Kです！
今回は見出しを作成するときに使う<h1>〜<h6>タグについて説明します。
サイトを作る上で必ず出てきますし、いろんな場面で見かけるタグなので基本をおさえておきましょう。
hタグを使わないことは、HTML構造がわかりにくくなるリスクがあります。
検索エンジンが理解しやすい構造にすることは、ユーザーの利便性を高めることに繋がります。
Googleから評価されやすいページにすることを心がけることがSEO対策の面でも重要になります。
hタグとは？
このタグは、文章の見出しを表現するタグになります。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類があります。
ちなみに、見出しタグはh1〜h6の6種類しかありません。
h7以降は存在しないのでご注意ください。
以下にコード例を載せますが、数字が小さいほど大きい見出しになります。
基本的にはcssでフォントサイズなど指定しなくてもブラウザが勝手にサイズ調整してくれます。
コード例
<body>
<h1>H1タグ：1番大きな見出しです</h1>
<h2>H2タグ：2番に大きな見出しです</h2>
<h3>H3タグ：3番に大きな見出しです</h3>
<h4>H4タグ：4番に大きな見出しです</h4>
<h5>H5タグ：5番に大きな見出しです</h5>
<h6>H6タグ：6番に大きな見出しです</h6>
</body>ブラウザでの表示結果
H1タグ：1番大きな見出しです
H2タグ：2番に大きな見出しです
H3タグ：3番に大きな見出しです
H4タグ：4番に大きな見出しです
H5タグ：5番に大きな見出しです
H6タグ：6番に大きな見出しです
見出しタグの基本ルール
一番メインになる見出しは<h1>タグを使いましょう。
サイトのタイトルとか、記事のタイトルとかですね！
基本的なルールとして以下は覚えておきましょう！
・h1タグから順番に使っていく ・h1タグの使用は一度だけにする ※原則1ページ（１記事）に一度だけ使うのが理想的です。
ちなみにh2〜h6タグは何度使用しても問題はありません。
h1タグを複数回使用すると、記事のテーマが読み手や検索エンジンに伝わりづらくなります。
また、見出しタグだけで記事は作らないようにしてください。
h2〜h6タグの後の文章はちゃんとpタグで本文を書きましょう。
Hタグに画像を使用する際の注意点
hタグに画像を使用している企業の公式サイトもあります。
しかし、本来重要なコンテンツやリンク等には、画像ではなくテキストを使用することをGoogleは推奨しています。
hタグとSEO対策の効果
hタグを利用することは、ユーザビリティの面でも検索エンジンに対して、コンテンツ内容の認識をサポートする効果もあります。
ユーザーの利便性を意識することの重要性については、Googleも公式サイトで案内をしています。
つまり、重要なテキストをマークアップするhタグに、画像を使用することは、おすすめできません。
最後に
今回は見出しタグについて説明しました。
見出しタグの数字が小さいほど大きい見出しになることと、基本ルールを覚えておけば大丈夫です。
基本を覚えておけば応用につなげることができるのでしっかり覚えておきましょう！
ではまた！
参考資料
Follow me!
