HTML <hgroup>

<hgroup> は見出し（h1, h2, h3, h4, h5, h5）とそれに関連するリード文またはサブタイトル（p）を含むセクションを表すHTMLタグです。

グルーピングとセクショニング
要素 説明
address 連絡先
article 独立した記事
aside コンテンツとは無関係なもの（広告等）
div 意味的ではなく視覚的な区切り
figure 図とキャプション
footer フッター
header ヘッダー
hgroup 見出し、サブタイトル及びリード文
main メインコンテンツ
nav ナビゲーション
section 意味的な区切り

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。hgroup 要素の終了タグは省略できない。

<hgroup>
  <!-- h1, h2, h3, h4, h5, or h6 -->
  <!-- pargraph -->
<hgroup>
<HGROUP>
  <!-- h1, h2, h3, h4, h5, or h6 -->
  <!-- pargraph -->
<HGROUP>

コンテンツモデル

hgroup 要素の開始タグと終了タグの間には、以下に示す要素を含めることができる。

  1. ひとつの見出し (h1, h2, h3, h4, h5, or h6)
  2. 0個以上のパラグラフ (p)
<hgroup>
  <h1>SE学院</h1>
  <p>SE学院はシステムエンジニアやプログラマのスキルアップに役立つ情報を提供しています。</p>
</hgroup>
<hgroup>
  <h2>HTML</h2>
  <p>HyperText Markup Language</p>
  <p>HTMLとは、ウェブサイトのコンテンツを記述するためのマークアップ言語です。</p>
</hgroup>
<hgroup>
  <h3>hgroup</h3>
</hgroup>

属性

以下に示す属性を hgroup 要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、要素独自の属性を JavaScript から読み取るための仕組みである。data- の接頭辞を付ければ、任意の属性名にすることができる。
dir
テキストを記述する方向を指定する。
dir属性
値 値
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
id
HTML文書内で一意な識別子を指定する。
lang
何語で記述されているかを指定する。
lang属性
値 説明
en 英語
en-UK 英語（イギリス）
en-US 英語（アメリカ）
ja 日本語
ja-JP 日本語（日本）
th タイ語
th-TH タイ語（タイ）
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title
ツールチップに適切な、要素のためのアドバイザリ情報を指定する。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて hgroup 要素へアクセスできる。

dir
dir 属性 
document.querySelector("hgroup").dir = "ltr";
draggable
draggable 属性 
document.querySelector("hgroup").draggable = false;
innerText
ノードに描画されるテキスト 
let text = document.querySelector("hgroup").innerText;
lang
lang 属性 
document.querySelector("hgroup").lang = "en";
style
style 属性 
document.querySelector("hgroup").style = "color: gray";
tabIndex
tabindex 属性 
document.querySelector("hgroup").tabIndex = 0;
title
title 属性 
document.querySelector("hgroup").title = "example";

参考文献

Web Hypertext Application Technology Working Group (2023) Sections HTML Living Standard