HTMLとCSSで作るウェブサイト作成入門

ブロックレベル要素(２)見出しを表す<h1>〜<h6>タグ

　重要なブロックレベル要素として、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>タグがあります。例えば、本には、「第1章　はじめに」とか、「第3節　現状の課題」、「第2項　対策」・・などと見出しがありますが、<h1>から<h6>のタグは、ウェブページ内で、このような見出しを付けるタグです。<h1>が最も大項目の見出しであり、順に小項目の見出しとなり、最小の見だしが<h6>となります。見出しの文言を、<h1>〜</h1>や<h2>〜</h2>で囲むことによって実現します。書き方と属性は、以下の通りです。

　具体例として、以下を示します。タグとブラウザ表示結果の対応をよく見比べて下さい。

[HTMLサンプル]
<h1 align="center">名城公園キャンパスの食事とくつろぎの環境</h1>
<hr size="5" width="80%" align="center">
<h2>キンシャチダイニング</h2>
<p>名城公園キャンパスの学食と言えば、ソファ席やボックス席などが充実した「キンシャチダイニング」。学生それぞれのスタイルで食事を楽しむことができます。
<h2>猿Cafe</h2>
<p>また、キンシャチダイニングの上の階には、おしゃれなブックカフェ「猿Cafe」があります。世界のビジネス誌を読みながら、ゆったりとコーヒーブレイクできます。</p>

[サンプルのブラウザ表示結果]

　見出しタグは、単に文字を少し大きく目立つように表示させるだけ、と思われがちですが、実は、検索エンジン対策(SEO)上、非常に重要な意味を持ちます。検索エンジンの検索結果は、検索ロボットがウェブページを巡回して集めた情報に基づいて表示されます。その際、検索ロボットは、ウェブページの重要なキーワードを効率よく集めるため、各ページの見出し特に<h1>タグに注目します。つまり、検索ロボットは、<h1>タグが設定された文字列は、そのページを表すキーワードが含まれていると見なすわけです。ですので、ウェブページを作成する際は、そのページの重要なキーワード、検索してもらいたいキーワードが<h1>タグに設定されるよう工夫すると良いでしょう。