2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

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

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

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

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

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

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

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

1.見出しタグとは?

見出しタグとは?

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

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

見出しタグ一覧
  • <h1>~</h1>:1番目に大きな見出し
  • <h2>~</h2>:2番目に大きな見出し
  • <h3>~</h3>:3番目に大きな見出し
  • <h4>~</h4>:4番目に大きな見出し
  • <h5>~</h5>:5番目に大きな見出し
  • <h6>~</h6>:6番目に大きな見出し

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




2.見出しタグの例

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

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

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

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




3.どのように見出しタグを使い分ければいいのか?

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

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

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

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

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

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

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

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




4.まとめ

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

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

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

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

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

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

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

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です