HTML5のヘッダと小見出し

ヘッダ部分について。
今まではこのように書いていたが、

<div id="header">
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
 </div>

HTML5はこのように書ける

<header>
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
</header>

でも、taglineクラス(小見出し)は色々な人が結構な頻度で使っているにも関わらず、
本来の見出しとくっついてしまっている。とはいえHTML5になる前まで標準的な
マークアップがなかった。

では、taglineを使わずに小見出しを出すにはどうしたらよいのか。

<header>
  <h1>My Weblog</h1>
  <h2>A lot of effort went into making this effortless.</h2>
</header>

ただ小見出しを出したいだけなのに、セクションが増えて文書構造が
変わってしまっている。

ではこうとか?

<header>
  <h1>My Weblog</h1>
  <h2>A lot of effort went into making this effortless.</h2>
</header>
<h3>Article1</h3>
<p></p>
<h3>Article2</h3>
<p></p>

あるべきでないノードが殘っている上に、本来ルートノードに属すべき子要素を
奪ってしまっている。これはすごくよくない。

というわけで、HTML5で、小見出しを使いたいときは、
hgroupという要素を使う。
hgroupは、2個またはそれ以上の関連する見出し要素をグループ化する働きがある。

<hgroup>
   <h1>My Weblog</h1>
   <h2>A lot of effort went into making this effortless.</h2>
</hgroup>

入門 HTML5