<hgroup> - ヘッダグループ

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

• 概要
• 説明
• 属性
• 詳細
• 使用例
• 関連項目
• リンク

概要

形式

<hgroup>～</hgroup>

サポート

https://caniuse.com/mdn-html_elements_hgroup

カテゴリ

フローコンテンツ

ヘッディングコンテンツ

パルパブルコンテンツ

親要素

フローコンテンツ を子要素に持てるもの

子要素

ひとつ以上の h1～h6 要素および template 要素

タグの省略

開始タグ：必須、終了タグ：必須

属性

グローバル属性

説明

hgroup は Header Group の略で、複数のヘッダ(h1～h6)をグルーピングします。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

詳細

hgroup は、HTML5 の草案で採用が検討されていましたが、最終勧告では破棄されました。HTML 5.1 でも採用されていませんが、HTML Living Standard で定義されています。

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

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

<h1>タイトル１</h1>
<p>本文...</p>
<h1>タイトル２</h1>
<p>本文...</p>

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

また、

<h1>タイトル１</h1>
<p>本文...</p>
<h2>タイトル２</h2>
<p>本文...</p>

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

ここで、

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

と記述すると、

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

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

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

使用例

<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>

関連項目

• h1
• h2
• h3
• h4
• h5
• h6

リンク

• https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup
• https://caniuse.com/#search=Obsolete%2Fdeprecated%20HTML%20elements

---