見出し画像

hタグのあれこれ

見出しということはわかっていたはずのhタグ。
しかし改めて復習してみると意外と知らないことが多かった。
重要なタグだしよく使うのでもう一度理解します。


hタグとは

見出しのタグ
<h1>~<h6>までで、数字が小さいほど重要度が高い。hタグを使用することによって検索エンジンに情報をわかりやすく伝えることができる。
ページの内容を正しく伝わるようにしていないと検査エンジンの検索順位に影響するので注意!

h1
ページ内で最も伝えたい内容(サイトの名前や、ページのタイトルなど)
画像やロゴをh1タグにする場合は必ずalt属性を記入する。
例:<h1><img src="image/logo.jpg" alt="大阪株式会社">

h2
h1で伝えたい内容をおおまかに章分けした時の内容(各セクションのタイトルなど、小見出し)

h3
h2で伝えたい内容をさらに章分けした時の内容(各セクションの中でさらに細かく分類するタイトル)

h4以降省力

【注意点】
・h1ダグは基本的に各ページで1回だけの使用だが、厳密にはhtml5から導入された<section>というタグの入れ子にすることでh1は複数使用できる。
・h2以降は複数利用可能。h2の後にh3を書いてもう一度h2を書くことも可能
・数字の順番を守る。h2、h4は書いてh3は書かないのはNG。
・見た目のデザインを変えるためだけにhタグを使用するのはNG。
・h5,h6は必要のある時だけ使う。細かく設定しすぎると帰って読みづらくなるらしい。
・見出しの下には必ず文章を入れること!pタグで文章を書くとより良い。
・hタグは伝えたい見出しに対して正しく使う。例えば
Worksのあとに制作実績と日本語で付いている場合は
<p> News</p>
<h1>お知らせ</h1>
と書いても良い。日本語の方が見出しに的確なので。

知らないルールもあるのでやっぱり初歩的なところから理解することは重要ですな。


この記事が気に入ったらサポートをしてみませんか?