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>
</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 (Last Updated 27 August 2024)
HTML Living Standard. 15 Rendering 15.3.6 Sections and headings (Last Updated 27 August 2024)
<hgroup>: - HTML: ハイパーテキストマークアップ言語 | MDN

JSONデータ

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

{
"hgroup": {
"check": "2024-09-01",
"group": "Section",
"element": "- - (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting) -- heading and related content (Normal elements.) [Flow|Heading|Palpable] --",
"attlist": {"%Global;": ""},
"comment": "見出しと関連コンテンツ (heading and related content)",
"point": "見出しと関連コンテンツを表します。",
"description": "小見出し, 代替タイトル, キャッチフレーズを表すコンテンツを含む 1 つ以上の p要素を持つ h1要素などの見出しの要素(h1～h6) をグループ化する為に使用できます。",
"kind": "Normal",
"categories": [
"Flow",
"Heading",
"Palpable",
],
"used": "parent (%Heading)*",
"contentmodel": "hgroup (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting)",
"tag": [
"-",
"-",
],
"attributes": "Global",
"dominterface": "HTMLElement",
"rendering": [
"Heading",
"Bidirectional",
],
"reference": [
{
"title": "HTML Living Standard. 4.3.7 The hgroup element.",
"href": "https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element",
"heading": "HTML Living Standard. 4.3.7 The hgroup element",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.6 Sections and headings.",
"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": "Last Updated 27 August 2024",
},
{
"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",
},
}
}

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

最終確認日

2024-09-01

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要素を表すプロパティはないので、id属性を用いて documentの getElementById()メソッドで、要素を取得する方法がお勧めです。この時のDOMインターフェースは、HTMLElement インターフェースです。hgroup要素に id属性があれば、スクリプトで何か扱っているとHTMLソースだけを見ても推測できて注意を払えるからです。尚、アンカーとしてid属性を用いる事も想定して、命名規則を決めておくのも良いと思います。

例

小見出し

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

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

この例は、hgroup要素を扱う例なので、実際には別の用途で別の属性や内容を取得, 設定する処理となると思います。その場合は少々別の知識が必要になります。

6.アクセシビリティ

hgroup要素は、
支援技術によって
ページの概要または目次に
含まれることを意図していない
ユーザーインターフェイスオブジェクトの
セットです。

<hgroup>要素の暗黙的なARIAセマンティクスは、role="group" となります。
`group` ロールは、次のようなランドマークを意味します：
支援技術によってページの概要または目次に含まれることを意図していないユーザーインターフェイスオブジェクトのセットです。

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

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

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

作成者が<hgroup>要素に明示的に指定可能なARIA ロール（役割）は以下のとおりです：
任意のロール値を使用できます。

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

7.レンダリング

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

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

ブロックフォーマットコンテキストに参加して、ブロックフォーマットコンテキストを継承, 確立します。もし、インラインフォーマットコンテキストに参加するコンテンツのみを含む場合は、新しいインラインフォーマットコンテキストを確立します。次に、すべてのインラインコンテンツをラップするルートインラインボックスも生成します。

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

8.気を付ける点

仕様と実装

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