見出しレベルについて調べてみた

今日は名古屋マークアップ勉強会に参加してきたので、自分が今回調べたHTML5のアウトラインについてブログに書きたいとおもいます


HTML5のアウトラインのルールを理解していますか?

見出しレベルに関する知識が曖昧だったのでブログに書いておこうとおもいます。
私はそもそも、h1 -> h2 -> h3と順番に見出しレベルを記述しないといけないとおもいこんでいました。しかし下のようにhタグを記述しても良いようです。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<section>
    <h2>ううううう</h2>
    <h4>えええええ</h4>
</section>
<h5>おおおおお</h5>

この場合の見出しレベルはどのようになるとおもいますか?

  1. ああああ
    1. いいいい
    2. ううううう
      1. ええええ
    3. おおおおお

こうなるんですよ。ここで、いいいいいおおおおおが同じ見出しレベルになるというのは驚きじゃないですか??
実は上のソースは下のソースの用に解釈されています。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<section>
    <h2>ううううう</h2>
    <section>
        <h4>えええええ</h4>
    </section>
</section>
<section>
    <h5>おおおおお</h5>
</section>

では、ここでアウトラインが決定されていくルールをまとめたいと思います。

ルール

  1. 見出しレベルが正しくないと、SECTIONが暗示的に挿入される
  2. SECTIONで開始する見出しタグはなんでもいい
  3. SECTIONで囲われると、見出しレベルが1つ下がる

1.見出しレベルが正しくないと、SECTIONが暗示的に挿入される

<section>
    <h1>あああああ</h1>
    <h1>いいいいい</h1>
</section>

セクションには大見出しが1つだけなので、上のソースは成立しません。ですのでブラウザは下のように解釈します。

<section>
    <h1>あああああ</h1>
</section>
<section>
    <h1>いいいいい</h1>
</section>

このように、無理矢理、sectionを分割するんですね。
では、下のケースはどうでしょう?

<section>
     <h5>あああああ</h5>
     <h2>いいいいい</h2>
</section>

このケースでも同じことが言えます。大見出しである、h5からh2に見出しレベルが変化することはありえないので、下のように解釈されます

<section>
     <h5>あああああ</h5>
</section>
<section>
     <h2>いいいいい</h2>
</section>

2.SECTIONで開始する見出しタグはなんでもいい

これはどういうことかというと、sectionの中は必ずh1で始まる必要はないということです。
下のソースのようにh4で始まってもかまいません。

<section>
    <h4>あああああ</h4>
</section>

3.SECTIONで囲われると上のSECTIONの大見出しより見出しレベルが1つだけ下がります。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<h3>ううううう</h3>
<section>
    <h3>えええええ</h3>
</section>

例えば、上のようなソースの場合、いいいいいえええええは同じ見出しレベルになります。
ここで注意して欲しいのが、sectionの中がh1だろうが、h2だろうが見出しレベルは、上の大見出しのレベルより1つ下がるだけなのです。
つまり下のようになります。

  1. あああああ
    1. いいいいい
      1. ううううう
    2. えええええ

どうでしょうか?結構SECTIONや見出しレベルだけでも結構覚えることがたくさんありますね。
なお、見だしレベルは以下のサイトにソースを貼付けるとテストすることができます。
ご自身の目でソースを書いて見だしレベルの確認をしてみてください。
https://gsnedders.html5.org/outliner/

感想

ただ個人としては、いくらブラウザがSECTIONを暗黙的に解釈してくれたとして、それにたよってHTMLを書くと思わぬところでアウトライン構造が崩れたりするのであまり、今回のサンプルのような記述はおすすめできません。
その見だしの重要度に応じてそれに応じたレベルのhタグを指定するのが好きです。

参考

https://gsnedders.html5.org/outliner/


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →