[初心者向け!] 見出しタグをどのように使い分ければいいのかを分かりやすく解説します!

2021年1月12日2021年1月26日

見出しタグの使い分けを知りたい人

見出しタグをどのように使い分ければいいのかを知りたいな!

この記事は上記のような疑問を解消するものとなっています。

見出しタグはSEOにも影響しますので、見出しタグの使い方をしっかりと知っておくとお得です。

そこで、この記事では見出しタグとは何か、どのように使い分ければいいのかをお話していきたいと思います。

気になる方は是非最後まで読んで頂ければと思います。

見出しタグとは?

見出しタグとはその名の通り見出しの役割を担っているタグのことです。

見出しタグは「h1」から「h6」まで階層があり、小さい数字のタグほど大きな見出しを意味しています。

見出しタグ一覧

タグに挟まれた部分に見出しを記述することで見出しが表示されます。

それでは見出しタグがどのように表示されるのかみていきましょう。

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

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

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

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

しっかりと見出しタグを使い分けることでユーザーが理解しやすくなりますし、検索エンジンにも評価されやすくなります。

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

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

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

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

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

最後まで読んで頂きまして、ありがとうございました。

見出しタグはSEOにも影響を及ぼすので、しっかりと理解しておくことをオススメします。

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

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

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

リンク

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

リンク

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。