h1要素がふたつ？

Posted on Sun 17 February 2019 in misc

とあるウェブページのソースを見たら、「あれ？h1要素がふたつ？」少し調べてみました。

私がHTMLについて学んだのは、XHTML1.0が出てきたくらいの頃でした。そのときは見出しを意味するh1やh2などは、文書の構造に従って使うようにと学びました。

次のような構造にしたいなら:

題名
第1章
  第1節
  第2節
第2章
第3章

次のように書くようにと。

<h1>題名</h1>
<h2>第1章</h2>
  <h3>第1節</h3>
  <h3>第2節</h3>
<h2>第2章</h2>
<h2>第3章</h2>

ところが、h1が2個あるページを見つけました。このブログで使っているテーマもh1が2個あります。そのうち直そうと思っていたこともあり、調べました。

結論としては、HTML5ではsection要素のネストレベルで見出しのレベルが決定されるという仕様になり、HTML5.1で廃止され元に戻ったということのようです。

HTML5では、次のような書き方ができたということです。

<h1>題名</h1>
<section>
  <h1>第1章</h1>
  <section>
    <h1>第1節</h1>
  </section>
  <section>
    <h1>第2節</h1>
  </section>
</section>
<section>
  <h1>第2章</h1>
</section>
<section>
  <h1>第3章</h1>
<section>

そしてHTML5.1で廃止になった。

<h1>題名</h1>
<section>
  <h2>第1章</h2>
  <section>
    <h3>第1節</h3>
  </section>
  <section>
    <h3>第2節</h3>
  </section>
</section>
<section>
  <h2>第2章</h2>
</section>
<section>
  <h2>第3章</h2>
<section>

このことについては、 もっと詳しいページ があります。 W3C にもHTML5.1で削除されたとありますね。

私が、HTMLを学んだ時と比べて、だいぶ変わっているみたいですね。また、勉強が必要かな…。

html