HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<hgroup>
見出しグループ要素。主要な見出しと、副題やキャッチフレーズなどの副次的な見出しをグループ化します。
info
概要
<hgroup> 要素（見出しグループ要素）は、複数の見出し要素（<h1>〜<h6>）を一つのグループとしてまとめ、主要な見出しを強調するために使用されます。
この要素を使用することで、アウトラインアルゴリズム（現在は非推奨）において、**グループ内の最もランクの高い見出し（例: <h1>）のみが文書のアウトラインに貢献**し、それ以外の副次的な見出しは無視されます。
play_circle
デモ (静的表示)
HTML (Source)
<hgroup>
<h1>HTML <hgroup> 要素のすべて</h1>
<p>副題：より明確なドキュメント構造のために</p>
</hgroup>
<br>
<hgroup>
<h2>セクションの主要見出し</h2>
<h3>サブタイトルやキャッチフレーズ</h3>
</hgroup>
Preview (Result)
HTML <hgroup> 要素のすべて
副題：より明確なドキュメント構造のために
セクションの主要見出し
サブタイトルやキャッチフレーズ
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用できる属性です。（例: id, class, langなど） |
| （固有属性なし） | <hgroup> 要素には、固有の属性はありません。 |
code
実用例
1. ブログ記事のタイトルと公開日（または著者）
<hgroup>
<h1>最新ウェブ技術とHTML5の進化</h1>
<p>公開日: time datetime="2025-12-14">2025年12月14日</time></p>
</hgroup>
2. 映画のタイトルとサブタイトル
<article>
<hgroup>
<h2>未来都市の設計図</h2>
<h3>〜テクノロジーがもたらす新たな生活〜</h3>
</hgroup>
<p>本文がここに続きます...</p>
</article>
3. ロゴとキャッチフレーズ
<header>
<hgroup>
<h1>企業名</h1>
<p>キャッチフレーズ: 明日を創造するテクノロジー</p>
</hgroup>
</header>
lightbulb
知っておくべき重要事項
info
セマンティクス（意味付け）の明確化
<hgroup> の主な目的は、文書のアウトラインにおいて、複数の見出しから主要な見出しを一つに絞り込むことです。これにより、スクリーンリーダーなどの支援技術や検索エンジンがドキュメント構造をより正確に理解できるようになります。
accessibility_new
使用できる要素
<hgroup> の中には、**最低1つの <h1> から <h6> までの見出し要素を含める**必要があります。その他の要素（例: <p>, <span>）も、副題として意味的に適切であれば含めることができますが、それらはアウトラインには影響しません。