6.見出しをグループ化する

<hgroup>~</hgroup>

hgroup要素は、見出しをグループ化する要素です。この要素の中には、h1~h6要素のみを入れることができます。
HTML5では、h1~h6要素が現れると暗黙的にセクションが生成されることになっています。
hgroup要素は、1つのセクション中に大見出し、小見出し、サプタイトル、キャッチフレーズといったレベルの異なる見出しが含まれるとき、各見出しごとにセクションが生成されないよう、まとめる役目を持っています。
このようにグループ化すると、hgroup要素に含まれる見出しのうち一番ランクの高いもののみがアウトライン上で見出しとなり、それ以外はアウトラインに現れなくなります。
見出し同士の関係や文書構造がより明確になるというメリットがあります。






■サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8”>
<title>hgroup SAMPLE</title>
</head>
<body>
<section>
 <hgroup>
  <h1>hgroup要素</h1>
  <h2>見出しをグループ化する要素</h2>
 </hgroup>
 <p>この要素の中には、h1~h6要素のみを入れることができます。</p>
</section>
</body>
</html>

■要素解説

カテゴリー:フロー・コンテンツ/見出しコンテンツ/パルパブル・コンテンツ
利用できる場所:フロー・コンテンツが期待される場所
コンテンツモデル:h1~h6要素を1個以上

■ブラウザ対応状況

IE10=○、IE9=○、Firefox=○、Chrome=○、Safari=○、Opera=○、iOS6=○、iOS5=○、Android=○