Article introduction of Wulin.com (www.vevb.com): Overview of the usage of HTML5 hgroup elements.
hgroup is a newly defined element in HTML5 that is used to group titles and subtitles. Why do we need a <hgroup> tag if we already have the header tag? Here are the answers to this question
What is the <hgroup> elementHere is a description of the document's description of <hgroup>:
hgroups are generally used as groups of elements of one or more h1 to h6, such as titles within a block and its subtitles.
The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification
What does this expression mean?<hgroup> plays a role that can contain one or more title-related containers, which may be in the &ls;header> element. It can contain only title elements from h1-h6, which may be subtitles, either-choice titles, or tag titles.
A simpler way to understand how to use <hgroup> is through some examples. For example, the following Dr.Oli example:
When the article tag has and only has one title:
1
2
3
4
<article>
<h1>Article title</h1>
<p>Content…</p>
</article>
When the article tag has a title and also contains metadata (meatadata)
1
2
3
4
5
6
7
8
<!-- Wrapping title and metadata in header -->
<article>
<header>
<h1>Article title</h1>
<p>(<time datetime=2009-07-13>13th July, 2009</time>)</p>
</header>
<p>Content…</p>
</article>
When the article tag has a set of self-closing titles:
1
2
3
4
5
6
7
8
<!-- Title h1 and subtitle h2 in hgroup -->
<article>
<hgroup>
<h1>Article title</h1>
<h2>Article subtitle</h2>
</hgroup>
<p>Content…</p>
</article>
An article tag contains a title and subtitle and metadata
1
2
3
4
5
6
7
8
9
10
11
<!-- A heading which uses header and hgroup -->
<article>
<header>
<hgroup>
<h1>Article title</h1>
<h2>Article subtitle</h2>
</hgroup>
<p>(<time datetime=2009-07-13>13th July, 2009</time>)</p>
</header>
<p>Content…</p>
</article>
Why do we use <hgroup>?We use <hgroup> to start the document outline (document outline).
When the group's title is in the <hgroup> element, the outline algorithm will overwrite the low-level title in the group and use the highest-level title as the outline. The following is an example:
1
2
3
4
5
6
<header>
<hgroup>
<h1><a href=/> Mini Apps</a></h1>
<h2>Web applications for iPhone, Android & other mobile platforms</h2>
</hgroup>
</header>
<hgroup> contains the title elements of h1-h2, but only <h1> is included in the outline. As shown in the figure below.
We can view the document outline from this link:
Summarize:
What we just talked about is how to use <hgroup> elements efficiently. Let's review:
.If you only have one title element (one in h1-h6), you don't need <hgroup>.
.When one or more titles and elements appear, <hgroup> is applied to surround them.
.When your title has a subtitle or other metadata related to section or article, put the <hgroup> and metadata into a separate <header> element container.
Original Chinese: Overview of HTML5 hgroup elements usage
Original English: Avoiding common HTML5 mistakes