★HTML Living Standard リファレンス
<hgroup>タグは、見出しとその関連コンテンツを表す際に使用します。
hgroup要素は、見出し、代替タイトル、キャッチフレーズなどを、見出し関連コンテンツとしてまとめるために使用できます。
HTML標準の仕様書通りに記述するなら、
hgroup要素は、小見出し、代替タイトル、キャッチフレーズなどを内容とするp要素を１つ以上持つh1-h6要素をグループ化します。
ということになります。
■使用例
以下のサンプルでは、h2要素でキャッチフレーズをマークアップしています。 ただ、このキャッチフレーズは上のh1要素を修飾するためのリード文を意図しているため、 本来は見出しとしてマークアップするべきではありません。
HTMLソース（不適切な例）
<body>
<h1>ACMEコーポレーション</h1>
<h2>1920年創業、あらゆる高速配送のリーダーカンパニー</h2>
...このような場合、以下のようにhgroup要素を使用することで適切なマークアップにできます。
HTMLソース（適切に訂正した例）
<body>
<hgroup>
<h1>ACMEコーポレーション</h1>
<p>1920年創業、あらゆる高速配送のリーダーカンパニー</p>
</hgroup>
...■使用例
以下のサンプルでは、header要素の一部としてhgroup要素が配置されています。 文書のヘッダーの一部に見出しコンテンツが含まれていることを表しています。
HTMLソース
<header>
<hgroup>
<h1>フルスクリーン API</h1>
<p>Living Standard — 最終更新日：2015 年 10 月 19 日</p>
</hgroup>
<dl>
<dt>参加:</dt>
<dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
<dt>コミット:</dt>
<dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
</dl>
</header>ブラウザ上の表示
フルスクリーン API
Living Standard — 最終更新日：2015 年 10 月 19 日
■使用例
以下のサンプルでは、body要素の直下にhgroup要素が配置されています。 <hgroup>～</hgroup>で囲まれた部分が、見出しコンテンツ部分であることを表しています。
HTMLソース
<body>
<footer><a href="../">トップに戻る</a></footer>
<hgroup>
<h1>クジラとイルカの違い</h1>
<p>クジラとイルカの違いを説明できますか？</p>
</hgroup>
<p>
クジラとイルカは、同じ生き物です。
どちらもクジラ目に属する哺乳類ですから全部クジラです。
その中で「イルカ」というのは小さめのクジラの呼び名です。
大きい小さいの境目にはっきりとした基準はなく、
だいたい全長4～5ｍくらいを境に大きい種類はクジラ、
小さい種類はイルカと呼ばれています。
</p>
<footer><a href="../">トップに戻る</a></footer>
</body>ブラウザ上の表示
クジラとイルカの違い
クジラとイルカの違いを説明できますか？
クジラとイルカは、同じ生き物です。 どちらもクジラ目に属する哺乳類ですから全部クジラです。 その中で「イルカ」というのは小さめのクジラの呼び名です。 大きい小さいの境目にはっきりとした基準はなく、 だいたい全長4～5ｍくらいを境に大きい種類はクジラ、 小さい種類はイルカと呼ばれています。
■使用例
以下のサンプルは、section要素のネストレベルごとに、 hgroup要素で見出し関連コンテンツのグループを定義しています。 １つの文書内に複数のh1要素を使用すると文書構造が把握しにくくなるかもしれませんが、HTMLの記述ルールとしては誤りではありません。
HTMLソース
<hgroup>
<h1>夏フェスっす！</h1>
<p>ニッポンの夏フェスガイド</p>
</hgroup>
<section>
<hgroup>
<h1>2023年の夏フェス</h1>
<p>今年日本で開催される音楽イベント一覧</p>
</hgroup>
<p>今年の夏フェスや音楽イベントを一覧にまとめました。</p>
</section>
<section>
<hgroup>
<h1>おしえて夏フェス</h1>
<p>音楽イベントに関するみんなの疑問・質問</p>
</hgroup>
<p>みんなの素朴な疑問・質問と回答を一覧にまとめました。</p>
</section>ブラウザ上の表示
夏フェスっす！
ニッポンの夏フェスガイド
2023年の夏フェス
今年日本で開催される音楽イベント一覧
今年の夏フェスや音楽イベントを一覧にまとめました。
おしえて夏フェス
音楽イベントに関するみんなの疑問・質問
みんなの素朴な疑問・質問と回答を一覧にまとめました。
■関連項目
- <body> …… 文書の本体（コンテンツ）を表す
- <article> …… 自己完結する内容であることを表す
- <section> …… 一般的なセクションを表す
- <nav> …… ナビゲーションリンクのセクションを表す
- <aside> …… メインコンテンツとは別のコンテンツであることを表す
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
- <hgroup> …… 見出しとその関連コンテンツを表す
- <header> …… 導入部分やナビゲーション補助のグループを表す
- <footer> …… フッターを表す
- <address> …… 連絡先情報を表す
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
