hgroup要素

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

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

1. [Exposed=Window]
2. interface HTMLElement : Element {
3. [HTMLConstructor] constructor();
4.  
5. // metadata attributes
6. [CEReactions] attribute DOMString title;
7. [CEReactions] attribute DOMString lang;
8. [CEReactions] attribute boolean translate;
9. [CEReactions] attribute DOMString dir;
10.  
11. // user interaction
12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
13. [CEReactions] attribute DOMString inert;
14. undefined click();
15. [CEReactions] attribute DOMString accessKey;
16. readonly attribute DOMString accessKeyLabel;
17. [CEReactions] attribute boolean draggable;
18. [CEReactions] attribute boolean spellcheck;
19. [CEReactions] attribute DOMString writingSuggestions;
20. [CEReactions] attribute DOMString autocapitalize;
21.  
22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
24.  
25. ElementInternals attachInternals();
26.  
27. // The popover API
28. undefined showPopover();
29. undefined hidePopover();
30. boolean togglePopover(optional boolean force);
31. [CEReactions] attribute DOMString? popover;
32. };
33.  
34. HTMLElement includes GlobalEventHandlers;
35. HTMLElement includes ElementContentEditable;
36. HTMLElement includes HTMLOrSVGElement;

Element

1. [Exposed=Window]
2. interface Element : Node {
3. readonly attribute DOMString? namespaceURI;
4. readonly attribute DOMString? prefix;
5. readonly attribute DOMString localName;
6. readonly attribute DOMString tagName;
7.  
8. [CEReactions] attribute DOMString id;
9. [CEReactions] attribute DOMString className;
10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
11. [CEReactions, Unscopable] attribute DOMString slot;
12.  
13. boolean hasAttributes();
14. [SameObject] readonly attribute NamedNodeMap attributes;
15. sequence<DOMString> getAttributeNames();
16. DOMString? getAttribute(DOMString qualifiedName);
17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
23. boolean hasAttribute(DOMString qualifiedName);
24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
25.  
26. Attr? getAttributeNode(DOMString qualifiedName);
27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
28. [CEReactions] Attr? setAttributeNode(Attr attr);
29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
30. [CEReactions] Attr removeAttributeNode(Attr attr);
31.  
32. ShadowRoot attachShadow(ShadowRootInit init);
33. readonly attribute ShadowRoot? shadowRoot;
34.  
35. Element? closest(DOMString selectors);
36. boolean matches(DOMString selectors);
37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
38.  
39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
41. HTMLCollection getElementsByClassName(DOMString classNames);
42.  
43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
45. };

GlobalEventHandlers

1. interface mixin GlobalEventHandlers {
2. attribute EventHandler onabort;
3. attribute EventHandler onauxclick;
4. attribute EventHandler onbeforeinput;
5. attribute EventHandler onbeforematch;
6. attribute EventHandler onbeforetoggle;
7. attribute EventHandler onblur;
8. attribute EventHandler oncancel;
9. attribute EventHandler oncanplay;
10. attribute EventHandler oncanplaythrough;
11. attribute EventHandler onchange;
12. attribute EventHandler onclick;
13. attribute EventHandler onclose;
14. attribute EventHandler oncontextlost;
15. attribute EventHandler oncontextmenu;
16. attribute EventHandler oncontextrestored;
17. attribute EventHandler oncopy;
18. attribute EventHandler oncuechange;
19. attribute EventHandler oncut;
20. attribute EventHandler ondblclick;
21. attribute EventHandler ondrag;
22. attribute EventHandler ondragend;
23. attribute EventHandler ondragenter;
24. attribute EventHandler ondragleave;
25. attribute EventHandler ondragover;
26. attribute EventHandler ondragstart;
27. attribute EventHandler ondrop;
28. attribute EventHandler ondurationchange;
29. attribute EventHandler onemptied;
30. attribute EventHandler onended;
31. attribute OnErrorEventHandler onerror;
32. attribute EventHandler onfocus;
33. attribute EventHandler onformdata;
34. attribute EventHandler oninput;
35. attribute EventHandler oninvalid;
36. attribute EventHandler onkeydown;
37. attribute EventHandler onkeypress;
38. attribute EventHandler onkeyup;
39. attribute EventHandler onload;
40. attribute EventHandler onloadeddata;
41. attribute EventHandler onloadedmetadata;
42. attribute EventHandler onloadstart;
43. attribute EventHandler onmousedown;
44. [LegacyLenientThis] attribute EventHandler onmouseenter;
45. [LegacyLenientThis] attribute EventHandler onmouseleave;
46. attribute EventHandler onmousemove;
47. attribute EventHandler onmouseout;
48. attribute EventHandler onmouseover;
49. attribute EventHandler onmouseup;
50. attribute EventHandler onpaste;
51. attribute EventHandler onpause;
52. attribute EventHandler onplay;
53. attribute EventHandler onplaying;
54. attribute EventHandler onprogress;
55. attribute EventHandler onratechange;
56. attribute EventHandler onreset;
57. attribute EventHandler onresize;
58. attribute EventHandler onscroll;
59. attribute EventHandler onscrollend;
60. attribute EventHandler onsecuritypolicyviolation;
61. attribute EventHandler onseeked;
62. attribute EventHandler onseeking;
63. attribute EventHandler onselect;
64. attribute EventHandler onslotchange;
65. attribute EventHandler onstalled;
66. attribute EventHandler onsubmit;
67. attribute EventHandler onsuspend;
68. attribute EventHandler ontimeupdate;
69. attribute EventHandler ontoggle;
70. attribute EventHandler onvolumechange;
71. attribute EventHandler onwaiting;
72. attribute EventHandler onwebkitanimationend;
73. attribute EventHandler onwebkitanimationiteration;
74. attribute EventHandler onwebkitanimationstart;
75. attribute EventHandler onwebkittransitionend;
76. attribute EventHandler onwheel;
77. };

ElementContentEditable

1. interface mixin ElementContentEditable {
2. [CEReactions] attribute DOMString contentEditable;
3. [CEReactions] attribute DOMString enterKeyHint;
4. readonly attribute boolean isContentEditable;
5. [CEReactions] attribute DOMString inputMode;
6. };

HTMLOrSVGElement

1. interface mixin HTMLOrSVGElement {
2. [SameObject] readonly attribute DOMStringMap dataset;
3. attribute DOMString nonce; // intentionally no [CEReactions]
4.  
5. [CEReactions] attribute boolean autofocus;
6. [CEReactions] attribute long tabIndex;
7. undefined focus(optional FocusOptions options = {});
8. undefined blur();
9. };

ARIA in HTML

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

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

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

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

レンダリング

ブロックボックス

セクション

1. hgroup {
2. display: block;
3. unicode-bidi: isolate;
4. }

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

説明

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

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

1. <!DOCTYPE html>
2. <html lang="ja">
3. <head>
4. <meta charset="utf-8">
5. <title>hgroup要素の例 - (Example of hgroup element) | 離珠のHTMLでしぃ！</title>
6. </head>
7. <body>
8. <h1>hgroup要素の例</h1>
9. <section>
10. <hgroup>
11. <h2>テーマ１</h2>
12. <p>テーマ１ａ</p>
13. </hgroup>
14. テーマ１(テーマ１ａ)の内容を記述します。
15. </section>
16. <section>
17. <h2>テーマ２</h2>
18. <section>
19. <h3>テーマ２ａ</h3>
20. テーマ２ａの内容を記述します。
21. </section>
22. <section>
23. <h3>テーマ２ｂ</h3>
24. テーマ２ｂの内容を記述します。
25. </section>
26. </section>
27. </body>
28. </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形式での、データのイメージです。

1. {
2. "hgroup": {
3. "check": "2024-09-01",
4. "group": "Section",
5. "element": "- - (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting) -- heading and related content (Normal elements.) [Flow|Heading|Palpable] --",
6. "attlist": {"%Global;": ""},
7. "comment": "見出しと関連コンテンツ (heading and related content)",
8. "point": "見出しと関連コンテンツを表します。",
9. "description": "小見出し, 代替タイトル, キャッチフレーズを表すコンテンツを含む 1 つ以上の p要素を持つ h1要素などの見出しの要素(h1～h6) をグループ化する為に使用できます。",
10. "kind": "Normal",
11. "categories": [
12. "Flow",
13. "Heading",
14. "Palpable",
15. ],
16. "used": "parent (%Heading)*",
17. "contentmodel": "hgroup (p*,(h1|h2|h3|h4|h5|h6),p*) +(%Scriptsupporting)",
18. "tag": [
19. "-",
20. "-",
21. ],
22. "attributes": "Global",
23. "dominterface": "HTMLElement",
24. "rendering": [
25. "Heading",
26. "Bidirectional",
27. ],
28. "reference": [
29. {
30. "title": "HTML Living Standard. 4.3.7 The hgroup element.",
31. "href": "https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element",
32. "heading": "HTML Living Standard. 4.3.7 The hgroup element",
33. "sub": "Last Updated 27 August 2024",
34. },
35. {
36. "title": "HTML Living Standard. 15 Rendering 15.3.6 Sections and headings.",
37. "href": "https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings",
38. "heading": "HTML Living Standard. 15 Rendering 15.3.6 Sections and headings",
39. "sub": "Last Updated 27 August 2024",
40. },
41. {
42. "title": "MDN Web Docs. HTML <hgroup>: The Heading Group element.",
43. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup",
44. "heading": "<hgroup>: - HTML: ハイパーテキストマークアップ言語 | MDN",
45. },
46. ],
47. "version": {
48. "first": "HTML Living Standard",
49. "latest": "HTML Living Standard",
50. },
51. }
52. }

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

最終確認日

2024-09-01