最終更新日 2021年4月7日

hgroup要素

hgroup要素は、見出し項目に小見出しや副題などが含まれ、複数のh1～h6要素の固まりとなっている場合に、それらの見出し全体をグループ化し、1つの見出しとして扱うために使われます。子要素として、h1～h6要素のいずれか1つ以上を含みます。hgroup要素の見出しレベルは、hgroup要素に含まれるh1～h6要素で一番高い順位の見出しレベルと同じになります。

hgroup要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点

・hgroup要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Headingコンテンツ	省略不可	Flowコンテンツを子にできる要素	h1～h6

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <hgroup>
      <h1>マクドエイド</h1>
      <h2>本格的ハンバーガー専門店</h2>
    </hgroup>
    <p>バーガーショップ「マクドエイド」にようこそ！</p>
    <p>当店のウリは、香ばしく焼き上げられたビーフパティです。</p>
    <p>新鮮なシャキシャキレタスとの相性もバッチリです。</p>
  </body>
</html>

参考文献：W3C HTML5「4.4.7 The hgroup element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。