『hgroup要素』 / HTML5新要素一覧　

hgroup要素

セクションの見出しを表し、見出し要素のh1～h6要素をグループ化します。

hgroup要素の特徴

見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないポイントがあります。

• hgroup要素内には、h1～h6要素以外の要素を使用することができません。
• hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。

hgroupのマークアップ方法

今回もサンプルソースを書きながら確認していきたいと思います。

【間違ったマークアップの例 】

<section>
    <hgroup>
        <h1>HTML5でサイトをつくろう</h1>
        <p>HTML5とWordpressの情報ブログ</p>
    </hgroup>
    <p>HTML5を1から勉強し始めました。・・・</p>
    <p>2014年の勧告時に置いていかれないように、このブログで・・・</p>
   	・
    ・	
    <section>
        <h2>当ブログについて</h2>
        ・
        ・
    </section>
</section>

【正しいマークアップの例 】

<section>
    <hgroup>
        <h1>HTML5でサイトをつくろう</h1>
        <h2>HTML5とWordpressの情報ブログ</h2>
    </hgroup>
    <p>HTML5を1から勉強し始めました。・・・</p>
    <p>2014年の勧告時に置いていかれないように、このブログで・・・</p>
   	・
    ・	
    <section>
        <h2>当ブログについて</h2>
        ・
        ・
    </section>
</section>

上記の【間違ったマークアップの例 】では、hgroup要素内にp要素が存在しています。hgroup要素はh1～h6要素以外の要素を入れることができないので、この記述は間違えになります。

【正しいマークアップの例 】では、hgroup要素内にh1・h2要素の見出し要素のみ存在しているので、この記述が正しいことを確認できます。

次に、hgroup要素のアウトラインについてですが、私は今までh系の要素が2つ連続する場合はhgroupで囲めばよいのかと安易に考えていました。しかし、hgroup内の見出し要素は最もレベルが高い見出し要素以外はアウトラインから除外され、小見出しや副題を表すということを知り非常に勉強になりました。もし、同じような考えをお持ちの方がいましたら気をつけてください。

尚、アウトラインについては以前の記事≪『アウトライン』について / HTML5マークアップ時の基本≫をよろしければ参考にしてください。

それでは、hgroup要素の有無でアウトラインがどのように変化するのかを確認していきたいと思います。

【hgroup要素を使用しない例 】

<section>
	<h1>HTML5でサイトをつくろう</h1>
    <section>
        <h2>HTML5とWordpressの情報ブログ</h2>
        <p>HTML5を1から勉強し始めました。・・・</p>
        <p>2014年の勧告時に置いていかれないように、このブログで・・・</p>
        ・
        ・
    </section>
    <section>
        <h2>当ブログについて</h2>
        ・
        ・
    </section>
</section>

【上記ソースのアウトライン 】

• 1. HTML5でサイトをつくろう
• 1.1. HTML5とWordpressの情報ブログ
• 1.2. 当ブログについて

h1要素『HTML5でサイトをつくろう』と副題として利用したいh2要素『HTML5とWordpressの情報ブログ』をhgroup要素でグループ化しない場合、副題のh2要素『HTML5とWordpressの情報ブログ』は同じh2要素『当ブログについて』と同一レベルで認識されます。

続いて、hgroup要素を使いh1要素『HTML5でサイトをつくろう』とh2要素『HTML5とWordpressの情報ブログ』をグループ化した場合について考えてみます。

【hgroup要素を使用した例 】

<section>
	<hgroup>
    	<h1>HTML5でサイトをつくろう</h1>
    	<h2>HTML5とWordpressの情報ブログ</h2>
    </hgroup>
    <p>HTML5を1から勉強し始めました。・・・</p>
    <p>2014年の勧告時に置いていかれないように、このブログで・・・</p>
    ・
    ・
    <section>
        <h2>当ブログについて</h2>
        ・
        ・
    </section>
</section>

【上記ソースのアウトライン 】

• 1. HTML5でサイトをつくろう
• 1.1. 当ブログについて

hgroup要素を使用した今回のソースでは、副題であったh2要素『HTML5とWordpressの情報ブログ』がアウトラインに表示されずh1要素『HTML5でサイトをつくろう』のみが採用されています。このことから、hgroup要素内では最も見出しレベルが高い要素が採用され、それ以外はアウトラインから除外されていることが確認できます。

今回のhgroup要素に関しては以上になります。

参考サイト：

• hgroup要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。