「h」はheadingの略で、<h>と</h>で囲まれたものは見出しの意味を持ちます。「h」の後には1～6までの数字をつける必要があり、「<h1>見出し１</h1>」や、「<h2>見出し２</h2>」などのように利用します。この際、<h1>が一番の大見出しとなり、数字が高くなるにつれて小見出しとなっていきます。
また、大見出し、小見出しの順に配置する必要があり、<h1>見出し１</h1><h3>見出し３</h3>のように順番を飛ばしてはいけません。これは表示上問題はありませんが、文章構造としてはNGとなります。そのため、最初にh2が来るのもよくないとされています。
hタグについて
実際にhタグを挿入するに当たってどのように挿入すればいいでしょうか。
挿入箇所について
hタグは、<body>と</body>の間に記述します。
たまにh1タグはなるべく<body>に近いほうがいいと言われます。SEO観点だったりしますが、文章構造としても、大見出し→文章→小見出し→文章といった順番の方が分かりやすいという考え方でしょう。
|
1 2 3 4 5 6 7 8 |
<body> <h1>大見出し</h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <h2>小見出し</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <h2>小見出し</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </body> |
中身について
hタグで挟まれたものは見出しを意味しますが、その中身にリンクを指定するaタグなどのインライン要素や、画像を読み込むimgタグなどを入れることが出来ます。
|
1 |
<h1><a href="./index.html">お料理研究会</a></h1> |
|
1 |
<h1><img src="./img/logo.jpg" alt="お料理研究会" /></h1> |
h1タグについて
一番の大見出しとなるh1ですが、何をh1にするのか、ウェブ制作するにあたって悩みどころになる方も多いかと思います。個人的な観点を多く含んでいますが、一つの考え方として参考になればと思います。
h1の複数利用
最初にh1の記述があり以降のhタグが連番になっていれば、h1を複数利用しても文章構造的には間違っていません。しかし、いくつかのサイトでも見たことありますが、個人的にも大見出しをつけた内容をいくつも載せるよりも、他のページに分けるか、それらをひとまとめにして<h2>にしてあげた方が綺麗なのかなと思います。HTML5から出てきたnavやheader、footerなどのように、ページの内容とそれ以外の部分を分けているのなら、それぞれに大見出しをつけるのもいいのかもしれません。しかし先程書いたように、ページ全体を一まとまりにしたユニークなh1タグを用意した方が構造的にシンプルで分かりやすそうです。
h1タグのユニーク性
私の場合ですが、タイトルやディスクリプションと同じようにページごとにユニークな方がよさそうです。それぞれ同じ大見出しがついていると、他のページとの相違性が図りづらいと思います。もちろんサイト名やロゴによる視認性や統一したグローバルナビがあった方がユーザビリティに優れていますが、そのページがどういったページなのかを大見出しに表記した方がページ単位で見たときに分かりやすいと思うからです。
企業サイトではよく全ページでh1タグを会社のロゴや会社名などで統一していますが、「○○の会社概要」や「○○のお知らせ」などのように詳しく見出しをつけた方が他ページとの相違性もあり分かりやすいと思うわけです。ウェブサイトはリンクによりページを飛ぶことはできますが、本のように連なったページの集合体として存在するわけではなく(サイトのトップページや次のページなどを指定する記述方法はありますが)、チラシのようにあくまで１ページで完結しています。サイトをひとまとまりとして大見出しを統一してしまうのはフレームレイアウトの考え方のような気もしますし、それぞれのページに行き着いた場合を想定していないような気もします。HTML5のheaderなどのタグやrole属性を利用して分割した場合は文章構成としてキレイかもしれませんが、やはりページの大見出しという意味も重視するならh1タグを複数つける必要がありそうです。
同様に、「/news.php?page=1&category=1」などのパラメータなどにより動的にページ内容が変わる場合においても、「カテゴリー○○のニュース一覧(１)」等といった大見出しが来るほうが分かりやすいと思います。
しかし、URLは変わらずPOSTの利用やログインユーザーなどによって動的に中身を変えるページについては、それらをまとめた総称(サービス名など)を大見出しにするのがちょうどいいのかと思います。
コメントを残す