-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
119 lines (99 loc) · 3.7 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
---
title: "<hgroup>: The Heading Group element"
slug: Web/HTML/Element/hgroup
page-type: html-element
browser-compat: html.elements.hgroup
---
{{HTMLSidebar}}
The **`<hgroup>`** [HTML](/en-US/docs/Web/HTML) element represents a heading and related content. It groups a single [`<h1>–<h6>`](/en-US/docs/Web/HTML/Element/Heading_Elements) element with one or more [`<p>`](/en-US/docs/Web/HTML/Element/p).
{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}
## Attributes
This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
## Usage notes
The `<hgroup>` element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a `<p>` element within the `<hgroup>`.
The `<hgroup>` itself has no impact on the document outline of a web page. Rather, the single allowed heading within the `<hgroup>` contributes to the document outline.
## Examples
```html
<!doctype html>
<title>HTML Standard</title>
<body>
<hgroup id="document-title">
<h1>HTML: Living Standard</h1>
<p>Last Updated 12 July 2022</p>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id="toc">
…
</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
</body>
```
### Result
{{EmbedLiveSample('Examples')}}
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>, heading content, palpable content.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
Zero or more {{HTMLElement("p")}} elements, followed by one
{{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}},
{{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}},
{{HTMLElement("Heading_Elements", "h5")}}, or {{HTMLElement("Heading_Elements", "h6")}} element,
followed by zero or more {{HTMLElement("p")}} elements.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>
Any element that accepts
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>flow content</a
>.
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<code
><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"
>group</a
></code
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
- [Sections and outlines of an HTML document](/en-US/docs/Web/HTML/Element/Heading_Elements).