見出しをhタグを使ってつける
文章はまとまりごとに見出しがあるととても見やすくなります。
見出しはh要素を使い、h1、h2、h3、h4、h5、h6の6種類があります。
h要素はh1から使い、数字の小さいほど重要度が上がっていきます。
h要素を使う時に注意したい事は、どれも重要だからといって全てをh1要素でマークアップしてはならない。という事です。
本や新聞が、大見出し・中見出し・小見出しを使い分けて作れているように、情報に優先順を設け、それぞれにh要素をあてはめるようにしましょう。
そうすることでメリハリが付き、読みやすくて文章が目に入ってきやすいページになります。
例えば見出しを設けない文章だと以下の図のようになります。
ところが、h要素を使って見出しを使うと以下の図のように各段に読みやすくなります。
同じ文章でも、見出しのあるなしで全く違った印象を持ちませんか?
見出しがある事で文章が整理され、読みたい情報はどこにあるのかをすぐに理解できるので、読み手かかるストレスが軽減され、より正確に伝えたい事を伝えることができるようになります。
また検索対策の観点からも、h要素は重要とされている要素です。見出しにする文章は内容を的確に捉えた簡潔なものが望ましいので、注意が必要です。
h要素の使い方
数字の小さい方から順に使い、最初には必ずh1要素を使います。
h1の次はh2、その次はh3といった具合に文章の階層構造を正しく示すために使いましょう。
最初にh2やh3要素を使う事はエラーにはなりませんが、推奨されていませんので、特別な理由がない限りはh1要素から使い始めましょう。
h2~h6要素は1ページの中で何回使っても良いとされているので、適度な箇所に適度なh要素を使って見出しをつけましょう。
h1要素については何回使っても良いとされていたり、使うのは1度だけが良いなど諸説ありますが、1ページに1度程度にとどめておいた方がよさそうです。
h要素は開始タグと終了タグを使って下図のようにマークアップします。
h要素は文字サイズや太さなど、見た目が強調されて表示されます。
よくあるh要素の誤用
下図の様なh要素の順番がバラバラな物は好ましくありません。
必ずh1、h2、h3、h4、h5、h6と順番に沿って使いましょう。
h要素は文章の階層構造を正しく伝えるために使う。という事を忘れないようにしてください。
まとめ
・見出しはh要素を使って表現する
・h要素はページの階層構造を正しく示すために使う
・見出しを適度に使う事で読みやすいページになる
・h要素はh1からh6まで6種類存在する
・h要素は検索対策の観点からも重要となる要素
・文章の内容がわかるような文章を見出しに入るようにする
・h2からh6までは1ページの中に複数回使用しても良い
・h1は1ページに1回程度の仕様にとどめる
・h要素は数字の小さい順に順番を守って使用する