<hgroup></hgroup>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / ヘッディング・コンテンツ / パルパブル・コンテンツ
利用場所 ヘッディング・コンテンツが置ける場所
内容 0個以上のp要素、その後に1つのh1-h6要素（必須）、その後に0個以上のp要素 / 任意でスクリプトサポート要素を混在

hgroup要素は、見出しと関連コンテンツを表します。この要素の内容には、h1-h6要素のいずれかを1つと、任意でp要素を配置します。


<hgroup>
<h1>タイトル</h1>
<p>サブタイトル</p>
</hgroup>

hgroup要素は、h1-h6要素とp要素をグループ化します。h1-h6要素で見出しを表し、p要素で小見出し、代替タイトル、タグライン（キャッチコピー的なもの）を表します。

例えば、タグラインを含めた見出しを表す場合は、hgroup要素を使って次のように記述します。

<hgroup>
<p>知りたいタグがすぐに見つかる</p>
<h1>TAG index</h1>
</hgroup>

p要素は、h1-h6要素の前後に任意の数だけ配置することができます。

<hgroup>
<p>タグライン</p>
<h1>タイトル</h1>
<p>サブタイトル</p>
</hgroup>

<hgroup>
<h2>見出し</h2>
<p>小見出し1</p>
<p>小見出し2</p>
</hgroup>
旧HTMLからの変更点
  • HTML5：hgroup要素が追加される予定でしたが、最終的には取りやめとなりました。
  • HTML LS：hgroup要素が定義されました。
  • HTML LS：要素の意味が変更されました。（見出しのグループを表す → 見出しと関連コンテンツを表す）［2022/07/05］
  • HTML LS：要素のコンテンツ・モデルが変更されました。［2022/07/05］

使用例


<article>

<header>

<hgroup>
<h2>Web制作に使えるサイト</h2>
<p>HTMLリファレンスを活用しよう！</p>
</hgroup>

<p>今回は、HTMLリファレンスのサイトをご紹介します。</p>

</header>


<section>
<h3>TAG index</h3>
<p>まずはこのサイト、TAG indexについてご紹介したいと ...</p>
</section>

...

</article>
表示例

Web制作に使えるサイト

HTMLリファレンスを活用しよう！

今回は、HTMLリファレンスのサイトをご紹介します。

TAG index

まずはこのサイト、TAG indexについてご紹介したいと ...

...