<hgroup> x - ヘッダグループ (廃止)

■ 概要

項  目説  明
記述形式 <hgroup>~</hgroup>
対応ブラウザー H5+ / e9+ / Fx4+ / Op11.1+ / Ch5+ / Sa4.1+
種  類
(カテゴリー)
フロー・コンテンツヘッディング・コンテンツパルパブル・コンテンツ  
置ける場所 フロー・コンテンツが記入できる場所
内包要素
(コンテンツ・モデル)
1個以上の h1~h6要素
(コンテンツ・モデル: 直接指定

■ 解説

<hgroup> は,h1~h6要素による見出しをグループ化する要素です。 この要素の中には,h1~h6要素のみ入れることができます。

HTML5 では,h1~h6要素に対して自動的にセクションが生成されることになっています。 章,節,パラグラフなどレベルの異なる見出しが含まれるものをまとめて1つのセクションとしたいときには,hgroup要素を使用して1つのセクションのみ生成するようにします。 つまり,hgroup要素は,各h1~h6要素ごとに複数のセクションが生成されないようにまとめる役目をもっています。

このように hgroup要素でグループ化すると,一番レベルの高い見出しだけがアウトライン上で表示され,それ以外は現れなくなります。 見出し同士の相互関係や文章全体の構造がより明確になるというメリットがあります。

HTML5 で新規導入予定の要素でしたが,最終的には採用は見送られた ようです。

■ 属性

種  類名  称
【固有属性】 なし
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
【ARIA aria-* 属性】
指定可能なもの

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例

HTMLソース
HTML
<body> ~ </body>
<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd>
    <a href="http://www.w3.org/...">http://www.w3.org/...</a>
  </dd>
  <dt>Previous version:</dt>
  <dd>
    <a href="http://www.w3.org/...">http://www.w3.org/...</a>
  </dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd>
    <a href="http://www.w3.org/...">http://www.w3.org/...</a>
  </dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd>
    <a href="http://www.w3.org/...">http://www.w3.org/...</a>
  </dd>
  <dt>Editor:</dt>
  <dd>
    Dean Jackson, W3C, 
    <a href="mailto:dean@w3.org">dean@w3.org</a>
  </dd>
  <dt>Authors:</dt>
  <dd>
    See <a href="#authors">Author List</a>
  </dd>
 </dl>
</header>

ブラウザー 表示例

Scalable Vector Graphics (SVG) 1.2

W3C Working Draft 27 October 2004

This version:
http://www.w3.org/...
Previous version:
http://www.w3.org/...
Latest version of SVG 1.2:
http://www.w3.org/...
Latest SVG Recommendation:
http://www.w3.org/...
Editor:
Dean Jackson, W3C, dean@w3.org
Authors:
See Author List

■ 備考

この文書全体では <link rel="stylesheet" href="style.css"> という記述により、スタイルシートに style.css が指定されていますので、上の例では、<h1> ~ </h1><h2> ~ </h2> の表示がこの文書全体と同一の形式になっています。