hgroupとは

hgroupの使用例［HTMLソースコード］

<header>
<hgroup>
<h1>500万円得をするホームページ作成会社.comのホームページ制作</h1>
<h2>あなたは500万円の損をしていることに気付いていますか??</h2>
</hgroup>
</header>
<h3>コスト</h3>
<p>ホームページの最大のコストはランニングコスト!!</p>
<p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか？</p>

hgroupの使用方法解説

　「hgroup要素」は、見出しをグループ化できます。
　たとえば、「大見出し」「小見出し」「副題」など、複数のレベルをもつ見出し要素が並ぶ場合、これをグループ化することで、より相互の見出し要素の関連を深める効果があります。

　「hgroup要素」で、見出しをグループ化させることは、その見出しの構造関係を明確にできるというメリットがあります。
　これまでは、「h1要素」と｢h2要素」が並んでいたとしても、それぞれが構造的にどのような関係にあるのか、不明瞭なままでした。

　たとえば、雑誌や新聞、書籍の見出しを見てみましょう。総じて、大見出しと中見出しがグループ化されているものです。

　それに対して、本文がはじまる前にも小見出し、または段落のタイトルに相当するものが記載されています。
　これらは、印刷された文書であれば、その文字サイズや配置によって、見出しグループなのか、段落のタイトルなのか、区別できました。しかし、HTML文醤においては、この区別をつけることはできません。
　このような問題を解決するための要素が、「hgroup」です。

hgroup要素のランク

　「hgroup要素」内に｢h1-h6要素」がある場合、その中で最もレベルが高い｢h1-h6要素」のランクをもつ要素になります。「h1-h6要素」がない場合は、｢h1要素」と同じランクとなります。