h2タグの使い方

HTMLでh2タグは見出しを意味しています。

見出しにもサイズ、大きさがありh2タグは中見出しとして扱われています。

大見出しはh1タグで、ページ本文中などの中見出しがh2タグの役割になります。

中見出しということもあり、1ページ内で何回使っても特に問題もありません。

中見出しは1つの話題のタイトルとして考えるとわかりやすいと思います。

このページでもh2タグ(中見出し)の使用例について掲載したいと思います。

このページのh2タグは背景が黒で文字色が白色の部分になります。

下記がh2タグを組み込んだ文章になります。

h2タグで今から伝える内容を宣言してみましょう！

今上書いた
『h2タグで今から伝える内容を宣言してみましょう！』の部分は実際にこのページのh2タグ部分になります。

デザインもcssを使って設定すると色々な背景色や文字色に変更する事が出来ます。

もちろん文字サイズも本文の文字より大きくなるようにサイズを設定する事が出来ます。

h2タグは意味として中見出しになります。
見出しになりますので文章を一区切りさせたり、新しい展開を作る時に使う事も出来ます。

h2タグを使って今からユーザーに伝える事や教える事を文章にして設定してみましょう。

例えば中見出しの役割としては、
大見出し(h1)タグよりも細く詳細なテーマを伝える事になりますので的確なテーマなどを書く前に使ってみましょう。

h2タグの使い方をわかりやすく紐解くと！？

例:私のHTMLテンプレート屋さんのご紹介

• HTMLテンプレート屋さん(店名)
• HTMLテンプレート(販売商品)
• ワードプレステンプレート(販売商品)
• css3テンプレート(販売商品)

---

上記のようなお店の紹介をWebページでする場合の見出しの立て方をご紹介したいと思います。

大前提としてHTMLテンプレートのショップを紹介するページを作る事になりますので
h1タグ(大見出し)はHTMLテンプレートなどを売っている◯◯というお店がありますよ！

とユーザーに伝える必要があります。

そこで大見出し(h1タグ)では
HTMLテンプレートを販売している
HTMLテンプレート屋さん
この2つをまず伝える必要があります。

そこでh1タグには
h1=22世紀でも使われる最新のHTMLテンプレート販売ショップ 【HTMLテンプレート屋さん】

という大見出しにしてみました。

この文字を読むと最新のHTMLテンプレートを売っているお店、HTMLテンプレート屋さんって名前のお店があるんだぁー！？
という事がなんとなくわかります。

ここまででh1タグを使い大見出しで店名と扱っている商品の種類をお伝えしました。

ここからは実際に何を売っているか？細く紹介する時にh2タグを使用します。

h2タグ=レスポンシブフルcss3テンプレートのご紹介

h2タグ=HTML57対応！！ワードプレステーマテンプレート

レスポンシブフルcss3テンプレートとワードプレステーマテンプレートについてさらに詳しい内容を見出しで立てる事が出来ています。
ここまでを振り返って見てみると自然とh1タグでHTMLテンプレートの見出しを立てた事もあり、h2タグではテンプレートが前提で、さらに内容を細かく伝えるための見出しに設定できています。

h2タグは中見出しという役割を果たすのでこの意味をしっかり含まれている事になります。

実際にHTMLは現在5ですが22世紀ようなので57にしてみましたW

気づいた方も多いと思いますが、
h2タグでは話題の絞り込みを行いより具体的な内容を伝えている事がわかると思います。

絞り込んだ話題をいくつか並べると上記の例ではcss3でカスタムされたテンプレートが欲しい人は

h2タグ=レスポンシブフルcss3テンプレートのご紹介
の中見出しを読む事になるでしょうし、

ワードプレステーマが欲しいなぁ！と思っている人がユーザーの中にいた場合は

h2タグ=HTML57対応！！ワードプレステーマテンプレート

の中見出しを読む確率が上がります。

h2タグの使い方はこのように
h1タグで記載した大見出しのテーマについてより詳しく、又は違った内容を書く時に使用すると良いでしょう。

このように見出しからしっかり文章を組み立てて本文内に組み込んでいくとロングテールの集客も期待出来るようになりますし、
体型立てられているのでユーザーにも伝えたい事が伝わる可能性も引き上げる事が出来ます。

h2タグの使い方に迷った場合はこのページを思い出して頂ければ幸いです。