记得刚做了腾讯互娱部门的一套笔试题。对于logo，我用了hgroup的标签，然后他们的主管告诉我，你连基本元素的用法都不知道。唉，现在想想真可悲。今晚想说说hgroup的应用，避免大家误解。
hgroup是HTML5中新定义的元素，用于标题和副标题组。当我们已经有了header标签时，为什么我们需要一个？<hgroup>标签？以下将是这个问题的答案。
什么是 <hgroup>元素
以下是文档对描述的描述 <hgroup>的描述：
hgroup通常被用作一个或多个h1到h6的元素组，例如一个块中的标题及其副标题。
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
这个表达代表什么？
<hgroup>扮演一个可以包含一个或更多标题相关的容器的角色，这些标题可能是&ls;header>元素。它只能包含h1-h6的标题元素，可以是副标题、二选一标题或标题。
更简单地理解如何使用它<hgroup>通过一些例子，方法如下。 Dr.Oli 的例子:
当article标签有且只有一个标题时：
<article> <h1>Article title</h1> <p>Content…</p> </article>
当article标签有一个标题并包含元数据时(meatadata)
<!-- 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>
当article标签有一组自闭标题时：
<!-- Title h1 and subtitle h2 in hgroup --> <article> <hgroup> <h1>Article title</h1> <h2>Article subtitle</h2> </hgroup> <p>Content…</p> </article>
article标签包含标题、副标题和元数据
<!-- 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>
为什么要用？<hgroup>?
我们用<hgroup>一切都起源于文档大纲(document outline).
当组的标题在那里<hgroup>当元素时，大纲算法将覆盖组中低级别的标题，并将最高级别的标题作为大纲。以下是一个例子：
<header>
<hgroup>
<h1><a href="/">Mini Apps</a></h1>
<h2>Web applications for iPhone, Android & other mobile platforms</h2>
</hgroup>
</header>
<hgroup>它包含h1-h2的标题元素，但只包含在大纲中<h1>.如下图所示。
可以从这个链接中查看文档大纲：
http://gsnedders.html5.org/outliner/
总结：
我们刚才谈到的是如何有效地使用它 <hgroup>元素。回顾:
.如果你只有一个标题元素(h1-h6中的一个)，你不需要<hgroup>.
.一个或多个标题和元素出现时，适用<hgroup>包围他们。
.当你的标题中有一个副标题或其他与section或article相关的元数据时，<hgroup>和元数据放在一个单独的位置<header>在元素容器中。记得加入我们的交流群:295431592
