今日は<hgroup>タグについて説明します。
<hgroup>は、<h1> – <h6>のグループをまとめて、マークアップするためのものです。見出し内のコンテンツの重要性が同じではない場合に使用されます。疑問に思う人がいるかもしれませんが、なぜ<hgroup>を付けなければならないのでしょうか？答えがあります。例を見てみましょう。
この例では、見出しは “Logo Slogan”ですが、 “Logo”は “Slogan”よりも大切にしたいので、 “Logo”を<h1>でマークアップして、“Slogan”は<h2>で使います。出来たhタグ概要を見てみましょう。
1.Logo
1.Slogan
2.Title
Sloganがhgroupに入っていました。 hgroupは“目次”のようなものであることを忘れないでください。なので、hgroupは “Slogan”が入れてはいけません。hgroupに入っても、Title と同じレベルにしてはいけません。
この例では、 “Logo”と “Slogan”を同じ<hgroup>でマークアップしていました。
1.Logo
2.Title
これは hタグ概要から“Slogan”が消えていました。これは<hgroup>を置くと、<h1> – <h6>のグループが同じ内容ことで、 最も重要なもの<h1>だけを表示します。
ヘッダー要素を使用するタイミング。
だいたい見出しは短い文章で、内容はまだ理解できましたら、<h1> – <h6>または<hgroup>を相応つける事ができます。。しかし、時々見出しは文章ではない場合もありますので、たくさんの単語を集まることで、<header>でマークアップすることになります。
ヘッダーは、内容のガイドラインの役です。その内容を読むということは、header要素は一番上にあるか一番下にあるかは限りません。その部分を<header>でマークアップします。header要素の例を見てみましょう。
この例は「ヘッダーとフッターの使い方」という見出しで、<h1>でマークアップを使用しました。
この部分は記事を作った人のセクション(By Trust coding)を追加いたしました。作った時ナビゲーションを含見ます。この部分は読者にもっと理解させるため紹介しました。記事のタイトルもそうですが、このすべての部分を<header>でマークアップすることにしました。
ヘッダー要素についてよく勘違いするのは、ヘッダー要素が要素ではないということで、新しいセクションは作成されません。多くの人はスタイルシートを<header>に設定して、ブロックとして表示されます。そして、要素だと思ってしまう方もたくさんいます。それは違いました。セクションではありません。例を見てみましょう。
この例から、hタグは次のようになります。
1.Heading A
1.Heading B
2.Heading C
問題は、「質問：この部分の内容はどちらの Heading ですか？」という部分はどちらの見出しでしょうか。この質問のヒットはヘッダー要素がセクションコンテンツではありません。
答えは 「見出しC」です。どうしてなのかを説明します。
この部分の内容がどちらの見出しなのかを確認する方法を教えます。簡単な方法があります。一つ一つのセクションを見て、最も近い上の見出しを拡張されたコンテンツになります。以下の例では、セクションコンテンツが見つかりません。なぜなら、すべてのコンテンツは同じセクション(Body)にあります。これが本文です。
「質問：この部分の内容はどちらの Heading ですか？」は「見出しC」の内容です。 これは小さなことかもしれませんが、見逃してはいけません。