hgroup要素

1.仕様

HGROUP要素は、
見出しと
関連コンテンツを
グループ化する
要素です。

HGROUP - - (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting) -- heading and related content (Normal elements.) [Flow|Heading|Palpable] --

hgroup

見出しと関連コンテンツ (heading and related content)

種類

通常要素

カテゴリ

使用できるコンテキスト

ヘディングコンテンツを受け入れる要素

ヘディングコンテンツを受け入れる要素のコンテンツとして、使用できます。

ヘディングコンテンツを受け入れる要素は、<body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <li>要素, <dd>要素, <caption>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <details>要素です。

コンテンツモデル

0個以上の<p>要素と、それに続く<h1>要素または<h2>要素または<h3>要素または<h4>要素または<h5>要素または<h6>要素と、それに続く0個以上の<p>要素オプションでスクリプトをサポートする要素が混在

0個以上の<p>要素と、それに続く<h1>要素または<h2>要素または<h3>要素または<h4>要素または<h5>要素または<h6>要素と、それに続く0個以上の<p>要素が配置できます。オプションで、スクリプトをサポートする要素を混在して配置できます。

スクリプトをサポートする要素に分類される要素は、<script>要素, <template>要素です。

タグの省略

どちらのタグも省略できません。

コンテンツ属性

グローバル属性のみ

DOM インターフェイス

HTMLElement

[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

Element

[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};

GlobalEventHandlers

interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};

ElementContentEditable

interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};

HTMLOrSVGElement

interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};

ARIA in HTML

暗黙的="group" ARIAロール="任意" aria-* 属性="GlobalAny"

暗黙的な ARIAセマンティクスは、role=group です。

要素で任意の role 値を使用できます。ただし、作成者が要素の暗黙的なロール, 汎用ロール, または ARIA によって非推奨となったロールをこれらの要素に対して指定することは推奨されません。

グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。

レンダリング

ブロックボックス

セクション

hgroup {
display: block;
unicode-bidi: isolate;
}

CSS を大雑把に読むと、ブロックレベルのブロックコンテナボックス(ブロックボックス)を生成します。などになります。

説明

hgroup要素は、見出しと関連コンテンツを表します。

hgroup要素は、小見出し, 代替タイトル, キャッチフレーズを表すコンテンツを含む 1 つ以上の p要素を持つ h1要素などの見出しの要素(h1～h6) をグループ化する為に使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hgroup要素の例 - (Example of hgroup element) | 離珠のHTMLでしぃ！</title>
<meta name="author" content="コータン (KOUTAN)">
<link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<h1>hgroup要素の例</h1>
<section>
<hgroup>
<h2>テーマ１</h2>
<p>テーマ１ａ</p>
</hgroup>
テーマ１(テーマ１ａ)の内容を記述します。
</section>
<section>
<h2>テーマ２</h2>
<section>
<h3>テーマ２ａ</h3>
テーマ２ａの内容を記述します。
</section>
<section>
<h3>テーマ２ｂ</h3>
テーマ２ｂの内容を記述します。
</section>
</section>
</body>
</html>

このサンプルへのリンクです。
(./exhgroup.htm)

参照元

HTML Living Standard. 4.3.7 The hgroup element (最終更新日 2025年8月29日)
HTML Living Standard. 15 Rendering 15.3.6 Sections and headings (最終更新日 2025年8月29日)
<hgroup>: - HTML: ハイパーテキストマークアップ言語 | MDN

JSONデータ

JSON形式での、データのイメージです。

{
"hgroup": {
"group": "Sections",
"element": "- - (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting) -- heading and related content (Normal elements.) [Flow|Heading|Palpable] --",
"attlist": {"%Global;": ""},
"summary": "見出しと関連コンテンツ (heading and related content)",
"point": "見出しと関連コンテンツを表します。",
"description": "小見出し, 代替タイトル, キャッチフレーズを表すコンテンツを含む 1 つ以上の p要素を持つ h1要素などの見出しの要素(h1～h6) をグループ化する為に使用できます。",
"elementKind": "Normal",
"categories": [
"Flow",
"Heading",
"Palpable",
],
"canUsedContexts": "parent (%Heading)*",
"contentModel": "hgroup (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting)",
"tagOmission": [
"-",
"-",
],
"rendering": [
"Heading",
"Bidirectional",
],
"domInterface": "HTMLElement",
"contentAttributes": "Global",
"reference": [
{
"title": "HTML Living Standard. 4.3.7 The hgroup element. Last Updated 29 August 2025",
"href": "https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element",
"heading": "HTML Living Standard. 4.3.7 The hgroup element",
"sub": "最終更新日 2025年8月29日",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.6 Sections and headings. Last Updated 29 August 2025",
"href": "https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings",
"heading": "HTML Living Standard. 15 Rendering 15.3.6 Sections and headings",
"sub": "最終更新日 2025年8月29日",
},
{
"title": "MDN Web Docs. HTML <hgroup>: The Heading Group element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup",
"heading": "<hgroup>: - HTML: ハイパーテキストマークアップ言語 | MDN",
},
],
"version": {
"first": "HTML Living Standard",
"latest": "HTML Living Standard",
},
"lastReviewed": "2025-08-31",
"obsoleteAttributes": [
],
}
}

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2025-08-31

2.使用できるコンテキスト

hgroup要素は、
ヘディングコンテンツを
受け入れる要素に
使用できます。

<hgroup>要素が使用できるコンテキスト(Context・文脈)は、ヘディングコンテンツを受け入れる要素のコンテンツとしてです。

<hgroup>要素は、ヘディングコンテンツでありフローコンテンツでもあります。よって、コンテンツモデルがフローコンテンツでありヘディングコンテンツを受け入れる要素に配置できます。つまりコンテンツモデルがヘディングコンテンツを除くフローコンテンツを受け入れるという要素があって、それには配置できないという事です。

ヘディングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

ヘディングコンテンツはコンテンツの一部としては配置できないけれども、他のフローコンテンツはコンテンツの一部として配置できる要素は、以下の各要素です。

body

hgroup

<body>
<hgroup>
<h1>ヘディングコンテンツ</h1>
<p>キャッチフレーズ</p>
</hgroup>
</body>

<body>要素のコンテンツの一部として、フローコンテンツである<hgroup>要素を配置している例です。

3.コンテンツモデル

hgroup要素は、
見出し要素を
配置できます。

<hgroup>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、0 以上の <p>要素、その後に 1 つの <h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素が続き、その後に 0 個以上の <p>要素が続きます。オプションでスクリプトをサポートする要素と混合されます。

スクリプトをサポートする要素に分類される要素は、以下の各要素です。

hgroup

<hgroup>
<h1>ヘディングコンテンツ</h1>
<p>キャッチフレーズ</p>
</hgroup>

<hgroup>要素のコンテンツの一部として、<h1>要素と<p>要素を配置している例です。

4.コンテンツ属性

hgroup要素は、
グローバル属性のみ、
配置できます。

<hgroup>要素に指定することができる属性は、グローバル属性のみです。

5.DOM インターフェイス

hgroup要素を、
直接表す
プロパティは
ありません。

<hgroup>要素を JavaScript などで操作するには、documentのgetElementById()メソッドを用いてid属性で指定して、<hgroup>要素を取得する方法があります。この時に取得できる値の形式はHTMLElement インターフェイスです。

<hgroup>要素に id属性があれば、スクリプトで何か扱っているとHTMLソースだけを見ても推測できて注意を払えるからです。尚、アンカーとしてid属性を用いる事も想定して、命名規則を決めておくのも良いと思います。

小見出し

<hgroup id="JHG501">
<h3>hgroup要素</h3>
<p>小見出し</p>
</hgroup>
<form>
この例示の文字の色は、<select onchange="document.getElementById('JHG501').style.color = this.value;">
<option value="inherit">継承する</option>
<option value="red">赤</option>
<option value="blue">青</option>
</select>です。
</form>

<hgroup>要素にid属性を指定して、そのid属性で要素を取得する例です。例示では、cssのcolorを選択して設定する処理としています。例示で動的に表示する為に、フォームの内容が変更された時に処理するコードとしています。

6.アクセシビリティ

hgroup要素の
暗黙的な
ARIAセマンティクスは
group role
(支援技術によって
ページサマリーや
目次に含まれることを
意図していない
ユーザー
インターフェース
オブジェクトの
集合。)
です。

<hgroup>要素の暗黙的なARIAセマンティクスは、role="group" です。
group role は、「支援技術によってページサマリーや目次に含まれることを意図していないユーザーインターフェースオブジェクトの集合。」です。

ページサマリーや目次に含まれるユーザーインターフェースオブジェクトのグループであるリージョンとは対照的です。

作成者は、ウィジェット内のアイテムの論理的な集合を形成するためにグループを使用すべきである。例えば、ツリーウィジェットの子要素は階層構造の兄弟要素の集合を形成する。ただし、リストボックスのコンテキストでグループを使用する場合、作成者は子要素をオプション要素に限定しなければならない。したがって、作成者および支援技術によるグループの適切な取り扱いは、グループが提供されるコンテキストによって決まる。

作成者はグループ要素をネストしてもよい。セクションがウェブページの目次に含まれるに値するほど重要である場合、作成者はそのセクションにリージョンロールまたは標準のランドマークロールを割り当てるべきです。

作成者が<hgroup>要素に明示的に指定可能なARIA ロール（役割）は、Any role (任意の役割) です。要素に任意のロール値を使用できることを表します。ただし、作成者が要素の暗黙的なロール、genericロール、または ARIA で非推奨のロールをこれらの要素に指定することは推奨されません。

ARIA の状態とプロパティについては、すべての要素で使用できるグローバル aria-* 属性に加えて、上記のロールに応じて使用可能なaria-* 属性が許可されます。

7.レンダリング

section {
display: block;
unicode-bidi: isolate;
}

<hgroup>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は block であり、ブロックレベルのブロックコンテナボックス(ブロックボックス) を生成します。

ブロックフォーマットコンテキストに参加して、ブロックフォーマットコンテキストを継承, 確立します。もし、インラインフォーマットコンテキストに参加するコンテンツのみを含む場合は、新しいインラインフォーマットコンテキストを確立します。次に、すべてのインラインコンテンツをラップするルートインラインボックスも生成します。
※ <hgroup>要素のコンテンツモデルの関係で、インラインフォーマットコンテキストに参加するコンテンツを含む事は、その様にスタイルを指定しない限りはなりません。

unicode-bidi は、置換されない要素のレンダリングでの Bidirectional text(双方向テキスト) に於いての期待される仕様の様です。

body要素ブロックフォーマット
コンテキスト

section要素ブロック
フォーマット
コンテキスト
(継続)

h1要素コンテンツ

p要素コンテンツ

<body>
<hgroup>
<h1>ブロック</h1>
<p>ブロックレベルのボックスのみの例。</p>
</hgroup>
</body>

<body>要素が存在して、その中に<hgroup>要素が存在して、その中に<h1>要素, <p>要素がある例です。

<body>要素は、ブロックレベルのブロックコンテナであるボックスを生成します。<body>要素はブロックフォーマットコンテキストに配置される為、ブロックフォーマットコンテキストを継承します。<body>要素は、ブロックレベルのボックスを生成する<hgroup>要素などを配置します。

<hgroup>要素は、ブロックコンテナボックスを生成します。<h1>要素, <p>要素は、ブロックレベルのボックスを生成します。この例ではブロックレベルのボックスを生成する要素だけを配置しています。なので、ブロックフォーマットコンテキストを継続します。

尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。

8.気を付ける点

仕様と実装

<hgroup>要素がどの様な効果が期待できるかよう分かりません。まぁソースを見てもらって意図が通じるかどうかだと思います。なんの為にその要素を用いるか、よく吟味して用いましょう。

9.付記

hgroup要素は
見出しと関連コンテンツを
グループ化できる要素で
グループ化してどうしたいか
よく考えて用いましょう。

無理に使う必要はないと思います。関連コンテンツにあたる部分が、区分に対してどのような位置づけかが大事です。もしかすると、それは見出しに組み込むべき一部なのかもしれませんし、文章の書きだしとする方がよいかもしれません。

次は、「header要素」です。
導入的なコンテンツのグループを表す header要素に関してのメモ書きです。
前のページの「見出し要素(h1 - h6)」はこちらです。
上位のページの「HTMLの区分化」はこちらです。