<h1> の宿命
htmlを学び始めたばかりの頃、僕たちは <h1> は1ページに1つしかあってはならないと習いました。
そのページを表す大見出しなのだから、1つ以上あるのは論理的におかしいというわけですね。
しかし最近のWebサイトでは <h1> を何度も何度も使うサイトが増えています。
なぜでしょうか？ ルール違反ではないのでしょうか？
HTML5のルール
セクションという概念がHTML5から追加されました。
大雑把にいうと「ひとまとまり」という意味です。
実はそのセクションが、<h1> 大量出現問題の答え！
たとえばこんなコードがあったとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<article> <h1>果物について</h1> <section> <h1>りんごについて</h1> <p>りんごという果物はそもそも……</p> </section> <section> <h1>みかんについて</h1> <p>柑橘系の中でもみかんというのは……</p> </section> …… </article> |
<article> 直下の <h1> は「果物について」という大見出しですが、その下の <section> の <h1> は「りんごについて」となっています。
これは本来 <h2> となるべき箇所ですが、なぜか <h1> になっています。
その理由こそが「<section> で囲まれているから」なのです。
<section>（や <article> など） で区切られてさえいれば、<h1> は「そのセクションの中の大見出し」という意味になるので、何回使っても文書論理的におかしくはないという思想なんですね〜。
全部 <h1> にした方がいいの？
じゃあ全部 <h1> にしてもいいのでしょうか？
さっそく答えをいうと、「どっちでもいい」です（笑）
HTML5の <section> で囲われている限り、クロールロボットは階層（ヒエラルキー）を把握できるので、わざわざ上から順番に <h2>、<h3>……と書かなくてもいいんですね。
別に順番に書いてもいいんですが、もし階層がひとつ変更されたら、その <h2> を <h3> にして〜……と全部を逐一変更しなきゃなので、個人的にはオール <h1> 作戦をオススメします！(^^ゞ
