files/zh-cn/web/html/element/hgroup/index.html


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
120
121
122
123
124
125

---
title: <hgroup>
slug: Web/HTML/Element/hgroup
tags:
  - Element
  - Experimental
  - HTML
  - HTML sections
  - HTML5
  - Web
  - 实验性
translation_of: Web/HTML/Element/hgroup
---
<div>{{HTMLRef}}</div>


<div><strong>HTML <code>&lt;hgroup&gt;</code> element</strong>代表文档章节所属的多级别的目录，它将多个&lt;h1&gt;至&lt;h6&gt;的子元素组装到一起。</div>


<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>


<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>这个元素仅包含全局属性。</p>

<h2 id="使用笔记">使用笔记</h2>

<div class="note">
<p><strong>注意：</strong>本元素已经从 HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 <br>
 然而，考虑到&lt;hgroup&gt;元素的一个关键存在目标是明确 HTML 规范中如何显示标题的轮廓算法，但因为其轮廓算法 (outline algorithm) 未在任何浏览器中实现，因此 <code>&lt;hgroup&gt; 语义仍旧是理论上的建议。</code><br>
 HTML5 (W3C) 规范提供了如何标记<a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">副标题，小标题，可选标题和标语</a>（Subheadings, subtitles, alternative titles and taglines）的建议。</p>
</div>

<p>The <code>&lt;hgroup&gt;</code> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a <em>multi-level</em> heading.</p>

<p>In other words, the <code>&lt;hgroup&gt;</code> element prevents any of its secondary <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> children from creating separate sections of their own in the outline—as those <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> elements otherwise normally would if they were not children of any <code>&lt;hgroup&gt;</code>.</p>

<p>So in the abstract outline produced by the <a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML outline algorithm defined in the HTML specification</a>, the <code>&lt;hgroup&gt;</code> as a whole forms a single logical heading, with the entire set of <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> children of the <code>&lt;hgroup&gt;</code> going into the outline as one <em>multi-level</em> unit, to comprise that single logical heading in the abstract outline.</p>

<p>To produce any (non-abstract) <em>rendered</em> view of such an outline, some choice must be made in the design of the rendering tool about how to render <code>&lt;hgroup&gt;</code> headings in such a way as to convey their multi-level nature. There are a variety of ways an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline; for example:</p>

<ul>
 <li>an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline in with a colon character and space (“<code>: </code>”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings</li>
 <li>an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s)</li>
</ul>

<p>Consider the following HTML document:</p>

<pre class="notranslate">&lt;!DOCTYPE html&gt;
&lt;title&gt;HTML Standard&lt;/title&gt;
&lt;body&gt;
  &lt;hgroup id="document-title"&gt;
    &lt;h1&gt;HTML&lt;/h1&gt;
    &lt;h2&gt;Living Standard — Last Updated 12 August 2016&lt;/h2&gt;
  &lt;/hgroup&gt;
  &lt;p&gt;Some intro to the document.&lt;/p&gt;
  &lt;h2&gt;Table of contents&lt;/h2&gt;
  &lt;ol id=toc&gt;...&lt;/ol&gt;
  &lt;h2&gt;First section&lt;/h2&gt;
  &lt;p&gt;Some intro to the first section.&lt;/p&gt;
&lt;/body&gt;</pre>

<p>A rendered outline for that document might look like the following:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png"></p>

<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by a colon and space, followed by the secondary title, <em>Living Standard — Last Updated 12 August 2016</em>.</p>

<p>Or, the rendered outline for that document might instead look like the following:</p>

<p><img alt="Rendered outline that includes an &lt;hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png"></p>

<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by the secondary title shown in parentheses:<em> (Living Standard — Last Updated 12 August 2016)</em>.</p>

<h2 id="示例">示例</h2>

<pre class="brush: html notranslate">&lt;hgroup&gt;
  &lt;h1&gt;Main title&lt;/h1&gt;
  &lt;h2&gt;Secondary title&lt;/h2&gt;
&lt;/hgroup&gt;
</pre>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("html.elements.hgroup")}}

<h2 id="参阅">参阅</h2>

<ul>
 <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
 <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>