見出しと副題したい（hgroup）
<hgroup>
<h1>フランケンシュタイン</h1>
<p>あるいは現代のプロメテウス</p>
</hgroup>
hgroupタグは、見出しと、その副題やキャッチコピーを1つのまとまりとして囲むタグです。
中に入れられるのは、見出し（h1〜h6）1つと、その前後に置くpタグだけです。
pタグは本文の段落ではなく、見出しに添える副題として扱われます。
注釈
hgroupは"heading group"の略ですが、いまの仕様では見出しは1つしか入りません。
名前と中身がずれているので、「見出しにpの副題をくっつける箱」と覚えるとよいです。
副題をつけたい
<hgroup>
<h1>くまブログ</h1>
<p>HTMLとCSSの学習記録</p>
</hgroup>
サイト名やページタイトルの下にキャッチコピーを置きたいときに使います。
hgroupで囲むと、そのpが「タイトルに付随する副題」だと明示できます。
文書のアウトラインには見出し（h1）だけが反映され、副題のpはアウトラインに影響しません。
記事のヘッダーで使いたい
<article>
<header>
<hgroup>
<h1>記事のタイトル</h1>
<p>3分で読める入門記事</p>
</hgroup>
<p>公開日: <time datetime="2026-08-30">2026年8月30日</time></p>
</header>
<p>本文...</p>
</article>
headerタグの中にhgroupを置く形が典型です。
hgroupが「タイトルと副題」だけをまとめ、
公開日や著者など冒頭のその他の情報はheaderの直下に並べます。
hgroup を使わない書き方
<h1>くまブログ</h1>
<p class="subtitle">HTMLとCSSの学習記録</p>
副題を表示したいだけなら、hgroupを使わず見出しの下にpを置くだけでもかまいません。
hgroupの利点は「このpは本文ではなく副題」と意味づけできる点だけなので、使う機会は多くありません。