Close
<hgroup>タグは、見出しとその関連コンテンツを表す際に使用します。
hgroup要素は、見出し、代替タイトル、キャッチフレーズなどを、見出し関連コンテンツとしてまとめるために使用できます。
HTML標準の仕様書通りに記述するなら、
hgroup要素は、小見出し、代替タイトル、キャッチフレーズなどを内容とするp要素を１つ以上持つh1-h6要素をグループ化します。
ということになります。
以下のサンプルでは、h2要素でキャッチフレーズをマークアップしています。
ただ、このキャッチフレーズは上のh1要素を修飾するためのリード文を意図しているため、
本来は見出しとしてマークアップするべきではありません。
<body>
<h1>ACMEコーポレーション</h1>
<h2>1920年創業、あらゆる高速配送のリーダーカンパニー</h2>
...このような場合、以下のようにhgroup要素を使用することで適切なマークアップにできます。
<body>
<hgroup>
<h1>ACMEコーポレーション</h1>
<p>1920年創業、あらゆる高速配送のリーダーカンパニー</p>
</hgroup>
...
以下のサンプルでは、header要素の一部としてhgroup要素が配置されています。
文書のヘッダーの一部に見出しコンテンツが含まれていることを表しています。
<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>Living Standard — 最終更新日：2015 年 10 月 19 日
以下のサンプルでは、body要素の直下にhgroup要素が配置されています。
<hgroup>～</hgroup>で囲まれた部分が、見出しコンテンツ部分であることを表しています。
<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の記述ルールとしては誤りではありません。
<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>ニッポンの夏フェスガイド
今年日本で開催される音楽イベント一覧
今年の夏フェスや音楽イベントを一覧にまとめました。
音楽イベントに関するみんなの疑問・質問
みんなの素朴な疑問・質問と回答を一覧にまとめました。
どのカジノが自分に最適か分からないですか?