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标签有且只要一个标题的时候:

1 2 3 4

<article>  <h1>Article title</h1>  <p>Content…</p> </article>

当article标签有一个标题,并且还包含元数据的时候(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…&l 免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 在html中定义元素的id也许name时，尽量避免使用javascript的关键字 div前前后后都是文字，想要在同一行上显示，发现变形了，加了float,clear都不行？ 为什么少了一句<DOCTYPE…网页就不居中了？该怎么解决 IE与firefox兼容JS跟CSS 网页设计中审慎使用CSS sprites div＋css＋js示范卷帘菜单 跪求弹球奇效ActionScript 2.0源代码 引出css时的 media="screen" 详解 css用框子实现圆角矩形 推荐阅读更多> ie9中DIV里面加链接标签，下面一个DIV就会莫名其妙的重复 Jquery css函数兑现动态操纵DOM节点的样式 同名checkbox的分级操作 求教，给body加上了CSS，与实际情况不符！解决办法 css3动画片系列之transition 属性 用status.index循环name字段，前面有checkbox，每行显示5个，值为空的时候依然有checkbox怎么处理 为啥连上服务器确不能上传文件解决思路 施用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果 网页源代码中加什么兑现该页面播放电视剧 哪位高手帮小弟我看一下为什么这个导航栏放在搜狗，百度等IE内核浏览器里就乱了 关于页面元素的对齐方式,css 面试美工，需要作品…该如何处理 比较了一下子基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架 bootstrap工作中碰到的知识汇总 怎么使用HTML5实现全屏API 格局时，该使用什么标签 正做一个web应用，希望隐藏导航栏，当用户进入应用后，再点击iphone底部工具栏最右侧的全屏键时，导航栏也不会显示出来，请教如何实现 帮忙看下IE6的一个不兼容的有关问题 10款CSS3按钮 - 软件工程师再也不用为按钮设计而发愁了. 请教关于浏览器兼容，需要注意哪些