Hタグの順序性を守りましょう

hタグの正しい使い方

本日は、ホームページ制作における「hタグ」の使用方法について記したいと思います。
ブログではあまり意識しないです(HTML表示にて記述している人は別です)が、ホームページをお持ちの方はこれを機に一度ソースチェックをしてみて下さい。
それはhタグの使用方法です。

Hタグは順序を守ること

《ご存知の方は読み飛ばしてください》
HTMLについて知らない方のために簡単に説明します。

HTMLというのは、webブラウザ(IEやchrome等)で表示するためのプログラム言語の一種です。プログラム能力がない人でも簡単に使えるよう開発された初心者向けの言語です。ただ表示するだけなら1日、2日あれば誰でもできます。
特徴はタグというものを使いプログラムすることです。

hタグの使用例

<h1>ナレッジコーディネーターのサービス</h1>
<p>サービス内容はこちらになります。</p>
↓ ソースファイルに上記の記述をするとブラウザーに表示されます

ブラウザ表示例

ナレッジコーディネーターのサービス
サービス内容はこちらになります。

ホームページ制作というのは、上記のようなタグを組み合わせて作っていく作業のことです。
アメブロなどのブログではプログラムが自動的にタグを生成してくれるので、タグ意識せずブラウザへ表示できます。
しかし、自動的にタグを生成しているといっても正しく生成されているわけではありません
検索エンジンが提示しているルールを違反しているものも多く見受けられます。
そのような記述をしていると、ページ自体の評価を下げる事につながるので、チェックする必要があります。

hタグはh1から順に使用する

それでは、本題に入りましょう。
<h>タグは見出しに使用します。
h1は文字が大きく、数字が少なくなっていくほど文字が小さくなっていくのが一般的な使用法です。
そのため、
文字の大きさでタイトルのタグを決めてしまう人がいます。
<h1>◯◯◯◯</h1>
<h3>△△△△</h3>
<h2>□□□□</h2>
利用者の注意をひく上では有効だと思いますが、google等の検索エンジンはこのような記述を嫌います。

hタグを順序通りに使うと
<h1>◯◯◯◯</h1>
<h2 class=”small”>△△△△</h2>
<h3 class=”big”>□□□□</h3>

文字の大きさを変えたいのであれば、別途スタイルシート(style.css)にclass=”small” や class=”big” の記述を行い、文字を大きく、小さく表示することができます。

ホームページ制作会社では当たり前のことですが、けっこうよく見受けられる間違いです。
特に制作会社に依頼せず自身で制作した人は一度チェックすることをオススメします。

Facebooktwittergoogle_plus