見出しタグ(hxタグ)の正しい使い方

公開日:2013年10月17日
 最終更新日:2014年1月10日

見出しは文章の概要を分かりやすく伝えるために使います。コンテンツを作るときに見出しをつける時は見出しタグを使います。見出しタグを使うことで、文章の構造をユーザーと検索エンジンに分かりやすく伝えることができます。。

このタグを使うと太字などの装飾が施され、ユーザーに見出しであることを伝えられます。検索エンジンには、このタグを使っている箇所が見出しであることを伝えられます。

使い方

見出しタグの使い方を説明します。

階層を持たせて使う

見出しタグには<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類があります。数値が小さいほど大きな見出しになります。これらを使い分けて、下の図のように文章に階層を持たせます。

hxtag

1つのページでそれぞれの見出しタグを使う回数に制限はありません。ただ、h1タグにはページの内容を表す内容を入れるべきので、使うのは原則1回にしておくのが良いでしょう。ただ、ページ内で話題が大幅に変わる場合はその限りではありません。

h2タグ以下は適切な箇所で区切りをつけて読みやすくするために使いましょう。見出しは内容を要約したものにしましょう。

見出しタグを使いすぎても使わなさ過ぎても、読みづらくなります。必要に応じて適切に使いましょう。使い方がピンと来ない場合は、ほかのサイトがどのようなタイミングで使っているのか調べると良いと思います。

使う順番に気をつける

h2タグの下に見出しを付ける場合はh3タグを使います。h3タグを飛ばしてh4タグを使うようなことをしないようしましょう。

見出しタグは文章の構造を表すために使います。このような使い方はルール違反となります。見出しタグに限らず、ルールに従ってサイト運営を行なうことでメンテナンスがしやすくなります。

デザインが気に入らないので特定のタグを使わないという人がいますが、その場合、タグのデザインを変更しましょう。

画像を見出しにする場合

テキストより評価が下がる可能性もありますが、下のような記述をすることで見栄えの良い画像を見出しにすることもできます。

<h3><img src="h3.png" alt="見出し"></h3>

alt属性のテキストが見出しになります。デザイン性の高いサイトなら試してみても良いと思いますが、あまりこだわらずテキストを見出しタグにしたほうが無難だと思います。

コメントを残す

サブコンテンツ

このページの先頭へ