h1,h2,h3,h4,h5,h6タグについて

hタグの「h」は見出しの意味です。
英語で新聞などの記事の見出しをheadingとかheadlineと言いますのでその”h”なわけです。
htmlのタグの場合大見出しから小見出しまでを1~6のレベルに分けて設定できることになっていてそれぞれのレベルに対し正しい使い方が決まっています。
先にも記した通りhtml(Hyper Text Markup Language/ハイパーテキスト記述言語)は文書の構成や文字などの修飾情報を「タグ」と呼ばれる文字列で囲う事によって文書中に記述していく言語です。そのためhtmlにもきちんとした文法があります。

日本語でも英語でもそうですが文法をきちんと守らなくても意味は通じることが多いですよね。
htmlの場合も文法を遵守しなくてもホームページの見た目的にはOKということも無いわけではありません。
ですがSEOの観点から言うとホームページを見てもらう対象は「人間=サイト閲覧者」と「ロボット=クローラー」の両方だという事を忘れてはいけません。
検索エンジンはユーザーの利便性向上のため日々進化しているわけですが人間と同じような「あいまいさ」は持ち合わせていません。
文法=記述のルールを守ることで検索エンジンに対しても人間にとっても読みやすいものに仕上がるのです。

hタグのルール

h1タグ

いわゆる「大見出し」です。新聞・雑誌と同様に大見出しは1ページに1か所と決まっています。
大見出しは記事内容の一番先頭に来なければなりません。
大見出しの前に文書などが入ってはいけません。

h2~h6タグ

「中見出し」「小見出し」です。
これらの見出しは1ページにいくつ使用しても構いませんが表示する順番はh2からh6の順番を守らなければなりません。
つまりh1タグの次にいきなりh3タグが来たりしてはいけないということです。

例えばこんな使い方をすると良いでしょう。
「大見出し」つまり<h1>が一番上に来てその下にpタグつまりパラグラフ(文書の段落)次に二番目の見出し<h2>と二番目の見出しの下に来るpタグで囲まれた文書の段落が続き以下同様に三番目の見出し<h3>四番目の見出し<h4>が順に記述されている点に注目してください。

<h1>浦島太郎</h1>
<p>浦島太郎は漁師だった。</p>
<h2>亀との出会い</h2>
<p>ある日太郎は子ども達が亀をいじめているところに出くわした。</p>
<h2>竜宮城への招待</h2>
<p>太郎が亀を助けると亀はお礼に竜宮城に連れて行ってくれるという。太郎は亀にまたがり竜宮城に連れて行ってもらった。</p>
<h3>竜宮城での日々</h3>
<p>竜宮城には乙姫がいて太郎を歓待してくれた。</p>
~中略~
<h2>玉手箱の中身</h2>
<p>太郎が亀に跨り浜に帰ると太郎が知っている人は誰もいなかった。おかしいと思いつつ太郎が玉手箱を開けると中から煙が出てきた。そしてその煙を浴びた太郎は老人になっていた。竜宮城で浦島太郎が過ごした日々は数日だったが地上では700年が経っていたのだ。</p>

西智子のホームページのアクセスアップ講座」では次のようになります。

<html>
<head>
<meta charset="utf-8" />
<title>西智子のホームページのアクセスアップ講座</title>
</head>
<body>
<h1>西智子のホームページのアクセスアップ講座</h1>
<h2>ホームページの企画・制作からSEO・SEM・広告戦略までホームページのプロのノウハウを公開!</h2>
<h3>ホームページの企画講座</h3>
<h3>デザイン講座</h3>
<h3>コーディング講座</h3>
<h3>SEO・SEM講座</h3>
<h3>SEOツール講座</h3>
<h3>SNS講座</h3>
</body>
</html>

pタグについて」に進む
metaタグについて」に戻る