<hgroup> - ヘッダグループ

トップ > HTMLリファレンス > <hgroup>

概要

項目説明
形式<hgroup>~</hgroup>
サポート[非推奨] / H5d / e9 / Ch5 / Fx4 / Sa4.1 / Op11.1
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素h1 / h2 / h3 / h4 / h5 / h6

説明

hgroup は、HTML5 の草案で採用が検討されていましたが、最終勧告では破棄されました。

h1 や h2 でサブタイトルを記述した場合に、これらをひとつのタイトルとして扱いたい場合に使用します。

HTML5 では、暗黙的なセクションの概念があります。

<h1>タイトル1</h1>
<p>本文...</p>
<h1>タイトル2</h1>
<p>本文...</p>

のような文書の構造は、下記のように解釈されます。

<section>
 <h1>タイトル1</h1>
 <p>本文...</p>
</section>
<section>
 <h1>タイトル2</h1>
 <p>本文...</p>
</section>

また、

<h1>タイトル1</h1>
<p>本文...</p>
<h2>タイトル2</h2>
<p>本文...</p>

のような文書の構造は、下記のように解釈されます。

<section>
 <h1>タイトル1</h1>
 <p>本文...</p>
 <section>
  <h2>タイトル2</h2>
  <p>本文...</p>
 </section>
</section>

ここで、

<h1>ドラゴンクエストⅢ</h1>
<h2>そして伝説へ...</h2>
<p>本文...</p>

と記述すると、

<section>
 <h1>ドラゴンクエストⅢ</h1>
 <section>
  <h2>そして伝説へ...</h2>
  <p>本文...</p>
 </section>
</section>

と解釈されてしまいますが、hgroupを用いることにより、

<hgroup>
 <h1>ドラゴンクエストⅢ</h1>
 <h2>そして伝説へ...</h2>
</hgroup>
<p>本文...</p>

が、下記のように解釈され、h1+h2 がひとつのヘッダのように扱われます。

<section>
 <hgroup>
  <h1>ドラゴンクエストⅢ</h1>
  <h2>そして伝説へ...</h2>
 </hgroup>
 <p>本文...</p>
</section>

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<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>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

関連項目

h1h2h3h4h5h6

Copyright (C) 2011-2015 杜甫々
初版:2011年6月4日 最終更新:2015年1月4日
http://www.tohoho-web.com/html/hgroup.htm