武林網(www.vevb.com)文章簡介：HTML5 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標籤有且只有一個標題的時候:
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…</p>
</article>
當article標籤有一組自我閉合標題的時候:
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>
一個article標籤包含一個標題和副標題和元數據
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>
我們為什麼要使用<hgroup>?我們用<hgroup>一切源起文檔大綱(document outline).
當群組的標題在<hgroup>元素的時候，大綱的算法將會覆蓋掉群組中低等級的標題，而將最高等級的標題作為大綱。下面的就是一個例子：
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>包含h1-h2的標題元素，但是在大綱中只包含<h1>.就像下圖展示的那樣子。
我們可以從這個鏈接查看文檔大綱：
總結：
我們剛剛講的是如何高效的使用<hgroup>元素。回顧一下：
.如果你只有一個標題元素（h1-h6中的一個），你並不需要<hgroup>.
.當出現一個或者一個以上的標題與元素時，適用<hgroup>來包圍他們。
.當你的有一個標題有副標題或者其它的和section或者article有關係的元數據時，將<hgroup>和元數據放到一個單獨的<header>元素容器中。
中文原文：HTML5 hgroup 元素使用概述
英文原文：Avoiding common HTML5 mistakes