前端怎么解析html5,解析HTML5中hgroup元素

记得当初刚做了一套腾讯互娱乐部门的笔试题，针对LOGO，我用了hgroup这个标签，然后他们主管对我说，你连基本元素的用法都不知道。唉，现在想想觉得好可悲，今天晚上就想说说关于hgroup的应用，避免大家走入误区。

hgroup是HTML5中新定义的元素，用来将标题和副标题群组。在我们已经有header标签的情况下，为什么我们还要一个标签？下面将是这个问题的解答。

什么是 元素

下面是文档关于的描述 的描述：

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

这个表述代表着什么？

扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在&ls;header>元素中。它只能包含从h1-h6的标题元素，这些标题可能是副标题、二选一的标题或者标记标题。

更简单的理解如何使用的方法，是我们通过一些例子。比如下面 Dr.Oli 的例子:

当article标签有且只有一个标题的时候:

Article title

Content…

当article标签有一个标题,并且还包含元数据的时候(meatadata)

Article title

(13th July, 2009)

Content…

当article标签有一组自我闭合标题的时候:

Article title

Article subtitle

Content…

一个article标签包含一个标题和副标题和元数据

Article title

Article subtitle

(13th July, 2009)

Content…

我们为什么要使用?

我们用一切源起文档大纲(document outline).

当群组的标题在元素的时候，大纲的算法将会覆盖掉群组中低等级的标题，而将最高等级的标题作为大纲。下面的就是一个例子：

Mini Apps

Web applications for iPhone, Android & other mobile platforms

包含h1-h2的标题元素，但是在大纲中只包含

.就像下图展示的那样子。

我们可以从这个链接查看文档大纲：

http://gsnedders.html5.org/outliner/

总结：

我们刚刚讲的是如何高效的使用 元素。回顾一下：

.如果你只有一个标题元素(h1-h6中的一个)，你并不需要.

.当出现一个或者一个以上的标题与元素时，适用来包围他们。

.当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时，将和元数据放到一个单独的元素容器中。记得加入我们交流群：295431592