webデザイン独学【無料】文章の見出しで使うhタグ。タイトルタグは検索（SEO）に影響します！

文章の見出しで使うhタグにはh1からh6まであります。ページ内で各タイトルを表記したい時に利用するタグです。使い方にルールもあります。タイトルタグは検索も影響しやすいと言われていますので重要タグと認識されています。

こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ

webデザイン独学【無料】文章の見出しで使うhタグ。タイトルタグは検索（SEO）に影響します！

見出しタグの記述方法
見出しタグの種類
hタグの表示例(HTML)
h1タグについて
見出しを記述してみよう！
ブラウザで確認してみよう
まとめ

タイトルを書くためのタグなんだね！

h１からh６まで使い分けるということかしら？

見出しタグの記述方法

視覚的に例えるとこんな感じ

ページ内で文章を書くときには見出し（タイトル）を付けます。例えば〇〇カフェのホームページを作成して魅力的なパンケーキを紹介したいとします。

その場合に「こだわりのパンケーキ！」というように見出しは<h>タグを使って記述します。そして文章は<p>タグで記述します。

ワンポイント！

これからホームページを作成するにあたり２つ重要なポイントがあります。それはユーザービリティとGoogleへの対策です。この２つは利益に直結していくのでとても重要！

HTMLタグの使い方を正しくすることでGoogleの評価もよくなります。文章やタイトルがしっかり記載されているホームページは検索エンジンにもヒットしやすくなるので正しいタグの使い方を学びましょう。

※ 独学だけの知識だと、変なタグの使い方でホームページを作成してる人もいるので注意です。

見出しタグの種類

タグ	意味
<h1>〜</h6>	見出し（文章のタイトル）を書くためのタグです。
<h1>〜</h1> <h2>〜</h2> <h3>〜</h3> <h4>〜</h4> <h5>〜</h5> <h6>〜</h6>	<h>タグが１〜６まである理由については、見出しの重要度に応じて使い分けるというルールになります。 h１が一番重要な見出しで、h２からh６になるにつれて重要度が弱まるというような位置づけになっています。

見出しタグには全部で６種類あります。<h1>〜<h6>までの表記となり、それぞれ開始タグと終了タグがあります。<h1>で始まり</h1>で閉じます。

hタグの表示例（HTML）

<!DOCTYPE HTML>
<html>
<head>
<title>サンプルのタイトル</title>
</head>
<body>
<h1>サンプル文字</h1>
<h2>サンプル文字</h2>
<h3>サンプル文字</h3>
<h4>サンプル文字</h4>
<h5>サンプル文字</h5>
<h6>サンプル文字</h6>
</body>
</html>

それではhタグを記述してみよう！

記述ができたらHTMLファイルをダブルクリックしてブラウザで確認してみましょう。

ブラウザで確認するとh1タグで書いた文字は１番大きく表示されています。h2〜h6になるにつれてフォントのサイズが小さくなります。

※ 練習用ファイルDLに「sozai03.html」を格納していますので上記のHTMLファイルを確認できます。

練習用ファイル DL

CSSという記述でフォントの大きさや色（カラー）は自由に変更することができます。しかしhタグの要素として備わったフォントサイズがありますので、上記のような表示となります。

記述	意味
CSSとは	CSSとはデザインやレイアウトを指定する記述です。HTMLが終わり次第あーるくんブログでも学べるように説明していきます。