「大見出し」を付けるために使うh1タグの書き方&注意点【HTML超入門10】

HTML/CSS入門

h1タグというのは、検索であなたのホームページにやってきた方に対して、その内容を正しく伝えるためのものです。また、同時にクローラーというGoogleのロボットが回ってきた時にも内容を伝える役目ももっている重要なものです。

このため、書き方や使い方をしっかり理解しておきましょう。

そもそもhタグって、なに?

hタグ(h1タグを含む見出しのタグ)は、ある程度の文章のかたまりにタイトルを付けて、訪問してくれた方にそのページを読みやすく分かりやすくするためのもので、h1〜h6の6種類あります。

h1が一番大きい見出しに使って、数が大きくなるほど小さい見出しに使います。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい" type="ln"]本でも、章ごとに見出しがアリますよね!?アレと同じです。特に普段から文章を読まない方は、この見出しと写真とで内容を理解しようとしますから重要ですね![/speech]

または、Googleのロボット(クローラーといいます)も、長い文章がツラツラとあるよりは、適切に見出しがあるページの方がいい評価になるようで、あなたのWebページが訪問ユーザーもしくは検索エンジンにとってわかりやすくなるよう、本文内(bodyタグ内)に見出しをもうけるためのタグです。

 

「うえせいやブログ」では

「うえせいやブログ」では、それぞれの見出しは次のように表示されるようにしています。

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

うえせいやブログでは、cssで、h1タグは文章中で使わないでタイトルタグと同じになるようにしてるので、デザイン的な装飾はしていませんが、h1タグは見出しの中で一番重要との判断を勝手にSafariやIEなどのブラウザ判断して文字を大きく表示しています。

 

h1タグの書き方

<!DOCTYPE html>
<html>
<head>
<title>たいとるタイトル</title>
</head>
<body>
<h1>テキストてきすと</h1>
</body>
</html>

h1タグにしたい文章を、タグでくるむだけでOKです。

 

h1は基本的には、titleと同じ内容で構わない

titleタグの書き方と、タイトルを付ける時に気をつけること【HTML超入門9】」で解説した「title」タグの内容と同じで構いません。

ただし、細かいことをいうと少し意味合いが違うので、覚えておくといいですよ。

タイトル

タイトルは、ページを見ていてもタブのところとか目立つところに表示されているわけではありません。
titleタグは、検索エンジンで検索してくれた人、SNSから来る人向けのものです。

このため、titleタグにはサイト名を入れるようにします。

 

H1タグ

そのページを見ている人向けに書くようにします。

基本的には、タイトルと同じになるのですが、内容が大きく変わるときには、1つのページに複数のh1タグを付けることもあるということです。

 

【まとめ】h1タグは、ページの一番大きな大見出しとして一つだけに使うとおぼえておくとハズレなし

結局うえせいはこう思う
hタグというのは「見出し」を作るためのタグで、h1〜h6タグまで、大見出し→中見出し→小見出し、と重みを持たせることが可能です。

h1タグは一番大きな見出しをつけるためのタグなので、タイトルタグとほぼ同じでOKですが、多少の違いがあることを覚えておくといいですよ。

では、また。最後まで読んでくれてテリマカシ。

▼HTML・CSS超入門 記事一覧