HTML5のセクションとアウトラインに注意!

HTML5を使用したMT5テーマを制作してるんですが、セクションのアウトラインで勘違いしてました。

アウトラインって言うのは、見出し(h要素)とセクション(section要素, article要素, aside要素, nav要素)で構成されるツリー構造のことなんだけど、article要素, aside要素, nav要素は、ここからここまでが○○ですよって明示するためだけの要素だと思ってたんです。

例えば、以下の2つのソースがあった場合、この2つのアウトラインは全く同じなんです。

  • section要素を使っていない
    <body>
      <h1>h1の見出し</h1>
      <h2>h2の見出し</h2>
      <h3>h3の見出し</h3>
    </body>
  • section要素を使っている
    <body>
      <h1>h1の見出し</h1>
      <section>
        <h2>h2の見出し</h2>
        <section>
          <h3>h3の見出し</h3>
        </section>
      </section>
    </body>

1つ目のソースのように見出しが適切なレベルで使われていれば、2つ目のソースのようにsection要素を使わなくても問題無いんです。

ちなみに1つ目のソースは暗黙的、2つ目のソースは明示的といった呼ばれ方で区別されてたりします。

で、勘違いしていたところなんですが、以下の2つのソースのアウトラインは同じだと思ってたんです。

  • article要素内でsection要素を使っていない
    <body>
      <h1>h1の見出し</h1>
      <article>
        <h2>h2の見出し</h2>
      </article>
    </body>
  • article要素内でsection要素を使っている
    <body>
      <h1>h1の見出し</h1>
      <article>
        <section>
          <h2>h2の見出し</h2>
        </section>
      </article>
    </body>

1つ目は暗黙的にh2要素のセクションを示していて、2つ目は明示的にh2要素のセクションを示しているつもりだったんです。

だけど実際はこっちが正解。

<body>
  <h1>h1の見出し</h1>
  <article>
    <h2>記述されていないh2の見出し</h2>
    <section>
      <h3>h2の見出し(誤)</h3>
    </section>
  </article>
</body>

だから、よくあるXHTMLのトップページなんかをHTML5にするときは要注意!

  • XHTML
    <body>
      <h1>h1の見出し</h1>
      <div id="article">
        <div class="section">
          <h2>h2の見出し</h2>
        </div>
        <div class="section">
          <h2>h2の見出し</h2>
        </div>
      </div>
      <div id="nav">
        <div class="section">
          <h2>h2の見出し</h2>
        </div>
        <div class="section">
          <h2>h2の見出し</h2>
        </div>
      </div>
    </body>
  • HTML5
    <body>
      <h1>h1の見出し</h1>
      <article>
        <h2>記述されていないh2の見出し</h2>
        <section>
          <h3>h2の見出し(誤)</h3>
        </section>
        <section>
          <h3>h2の見出し(誤)</h3>
        </section>
      </article>
      <nav>
        <h2>記述されていないh2の見出し</h2>
        <section>
          <h3>h2の見出し(誤)</h3>
        </section>
        <section>
          <h3>h2の見出し(誤)</h3>
        </section>
      </nav>
    </body>

こんな感じで、XHTMLをHTML5にしたら、意図していないアウトラインになっているかもしれないですよ!