H1 より H2 のほうがFontSizeが大きい？

なんじゃこりゃ？って思ったので書いておく。

tl;dr

h1 タグは, article / section / aside / nav タグでネストされていると h(n+1) タグと同じになる。

<h1>H1</h1>

<article>
  <h1>H1 === H2</h1>
</article>

<article>
  <section>
    <h1>H1 === H3</h1>
  </section>
</article>

確認環境

Chrome 57

発端

article タグの中の section タグ内で h1 を使ったら h2 タグより文字サイズが小さい。

どういうことだ！バグじゃないか！！

と思ったけど落ち着いてぐぐってみた。

あっさりヒット

以下の Stackoverflow のページがあっさりヒット。

• <h1> is smaller than <h2> in firefox and chrome

質問者も同じように「おかしくね？」って言ってます。が、ベストアンサーの回答を見てみると

In HTML5, an <h1> inside sections nested n levels deep is treated like <h(n+1)> instead. So an <h1> inside a single <section> is semantically equivalent to an <h2> and is rendered as such.
(雑訳: HTML5 ではネストされた中にある h1 タグは <h(n+1)> になるよ。<section> の中にある <h1> は <h2> と同じ意味になるよ。)

解決

とのことで、 article / section / aside / nav タグの中にある h1 は、 h(ネストされた数 + 1) になるとのことでした。

へぇ。へぇ。へぇ。へぇ。へぇ。