HTML5 から <h1> を何回も使っていい理由 | hajipion.com

<h1> の宿命

htmlを学び始めたばかりの頃、僕たちは <h1> は1ページに1つしかあってはならないと習いました。

そのページを表す大見出しなのだから、1つ以上あるのは論理的におかしいというわけですね。

しかし最近のWebサイトでは <h1> を何度も何度も使うサイトが増えています。

なぜでしょうか? ルール違反ではないのでしょうか?

HTML5のルール

セクションという概念がHTML5から追加されました。

大雑把にいうと「ひとまとまり」という意味です。

実はそのセクションが、<h1> 大量出現問題の答え!

たとえばこんなコードがあったとします。

<article> 直下の <h1> は「果物について」という大見出しですが、その下の <section><h1> は「りんごについて」となっています。

これは本来 <h2> となるべき箇所ですが、なぜか <h1> になっています。

その理由こそが「<section> で囲まれているから」なのです。

<section>(や <article> など) で区切られてさえいれば、<h1> は「そのセクションの中の大見出し」という意味になるので、何回使っても文書論理的におかしくはないという思想なんですね〜。

全部 <h1> にした方がいいの?

じゃあ全部 <h1> にしてもいいのでしょうか?

さっそく答えをいうと、「どっちでもいい」です(笑)

HTML5の <section> で囲われている限り、クロールロボットは階層(ヒエラルキー)を把握できるので、わざわざ上から順番に <h2><h3>……と書かなくてもいいんですね。

別に順番に書いてもいいんですが、もし階層がひとつ変更されたら、その <h2><h3> にして〜……と全部を逐一変更しなきゃなので、個人的にはオール <h1> 作戦をオススメします!(^^ゞ

Hajime Hirono

Written by

広野 萌(ひろの はじめ)

@hajipion

株式会社FOLIO CDO。
1992年2月京都生まれ、早稲田大学文化構想学部卒、ヤフー出身。
UI/UXデザインとコンセプトメイキングが得意です。
代表作に「inShade」「INTEMPO」など。

» 経歴・受賞歴・ポートフォリオ

Related Posts

hajipion.com TOP