【HTML】h1~h6タグの使い方(見出しタグ)

こんにちは!CodeClub965で講師をしているKです!

今回は見出しを作成するときに使う<h1>〜<h6>タグについて説明します。

サイトを作る上で必ず出てきますし、いろんな場面で見かけるタグなので基本を押さえておきましょう。


<h1>~<h6>タグとは?

このタグは、文章の見出しを表現するタグになります。

<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ページ(1記事)に一度だけ使うのが理想的です。

ちなみにh2〜h6タグは何度使用しても問題はありません。

h1タグを複数回使用すると、記事のテーマが読み手や検索エンジンに伝わりづらくなります。

また、見出しタグだけで記事は作らないようにしてください。

h2〜h6タグの後の文章はちゃんとpタグで本文を書きましょう。

最後に

今回は見出しタグについて説明しました。

見出しタグの数字が小さいほど大きい見出しになることと、基本ルールを覚えておけば大丈夫です。

基本を覚えておけば応用につなげることができるのでしっかり覚えておきましょう!

ではまた!