【今さら聞けない】見出しタグとは？

html

ゆうごろうです。

Web制作者において、今更聞けないような知識をアウトプットするシリーズを始めました。

今回は少しおなざりになりがちな、見出しタグについて記述します！

実際、慣習的に書いている人も多いんだよね。
タグの理解は大事になってくるから今のうちに復習しておこう！

ゆうごろう
ゆうごろう

そもそも見出しタグとは

そもそも見出しタグというのは、記事やセクションのタイトルを設定するものです。

例えば下記のようなコンテンツがあるとします。

こちらをコードで見るとこのようになってます。

<body>
    <h1>今更聞けないシリーズ！</h1>
    <section>
      <h2>見出しタグとは？</h2>
      <p>説明しよう！見出しタグとは</p>
      <div>
        <h3>見出しタグの書き方</h3>
        <p>こうやって書きます</p>
      </div>
      <div>
        <h3>見出しタグの役割</h3>
        <p>こうやって書きます</p>
      </div>
    </section>
</body>

このように、ページ内でブロックごとに見出しを設定できるタグとなっております。

例えば、現在表示されているページの記事名は「【今更聞けないシリーズ】見出しタグとは？」なのでこのページのh1タグには「【今更聞けないシリーズ】見出しタグとは？」が設定されます。

h2はそのページで伝えたいセクションの区切りを表したもので、この記事では「そもそも見出しタグとは」が設定されます。

このように、見出しタグはページにおいて一番重要度の高い見出しタグから階層構造で使用されます。

タグの種類としてh1〜h6まであり、h1が重要度の一番高いタグになります。

h1タグの注意点

h1タグについて、注意して欲しい点があります。

h1タグでは以下のような使い方をする方法があります。

<h1>
  <a href="">
    <img src="" alt="サイトのロゴです。">
  </a>
</h1>

このようにh1タグにサイトのロゴを設定するやり方も間違ってはいないですが、サイトが複数のページで運用されている場合好ましくないやり方となります。

先ほども記述したように、h1とはページの見出し構造を表すものです。

どのページを見てもページタイトルが全て同じというのはおかしいですよね！！？？

故にh1タグはページごとに正しく設定するものなのです。

LPなど、1ページしか存在しない場合は使用してもいいと思います！

ゆうごろう
ゆうごろう

まとめ

見出しタグにはどのような使い方があるのかをまとめてみました。

実際そこまで意識して使用してなかった方もいるのではないでしょうか？

この今更聞けないシリーズは今後もアップしていくので楽しみにしてください！