武林網(wǎng)(www.conghuacea.com)文章簡介：HTML5 hgroup 元素使用概述.

hgroup 是HTML5中新定義的元素，用來將標(biāo)題和副標(biāo)題群組。在我們已經(jīng)有header標(biāo)簽的情況下，為什么我們還要一個<hgroup>標(biāo)簽？下面將是這個問題的解答

下面是文檔關(guān)于的描述 <hgroup>的描述：
hgroup一般被用作將一個或者更多的h1到h6的元素群組，比如，一個區(qū)塊內(nèi)的標(biāo)題和它的副標(biāo)題。

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>扮演著一個可以包含一個或者更多標(biāo)題相關(guān)的容器的角色,這些標(biāo)題可能在&ls;header>元素中。它只能包含從h1-h6的標(biāo)題元素，這些標(biāo)題可能是副標(biāo)題、二選一的標(biāo)題或者標(biāo)記標(biāo)題。

更簡單的理解如何使用<hgroup>的方法，是我們通過一些例子。比如下面 Dr.Oli 的例子:

當(dāng)article標(biāo)簽有且只有一個標(biāo)題的時候:

1

2

3

4

<article>

 <h1>Article title</h1>

 <p>Content…</p>

</article>

當(dāng)article標(biāo)簽有一個標(biāo)題,并且還包含元數(shù)據(jù)的時候(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>

當(dāng)article標(biāo)簽有一組自我閉合標(biāo)題的時候:

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標(biāo)簽包含一個標(biāo)題和副標(biāo)題和元數(shù)據(jù)

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>一切源起文檔大綱(document outline).
當(dāng)群組的標(biāo)題在<hgroup>元素的時候，大綱的算法將會覆蓋掉群組中低等級的標(biāo)題，而將最高等級的標(biāo)題作為大綱。下面的就是一個例子：

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的標(biāo)題元素，但是在大綱中只包含<h1>.就像下圖展示的那樣子。

我們可以從這個鏈接查看文檔大綱：

總結(jié)：
我們剛剛講的是如何高效的使用 <hgroup>元素。回顧一下：
.如果你只有一個標(biāo)題元素（h1-h6中的一個），你并不需要<hgroup>.
.當(dāng)出現(xiàn)一個或者一個以上的標(biāo)題與元素時，適用<hgroup>來包圍他們。
.當(dāng)你的有一個標(biāo)題有副標(biāo)題或者其它的和section或者article有關(guān)系的元數(shù)據(jù)時，將<hgroup>和元數(shù)據(jù)放到一個單獨(dú)的<header>元素容器中。

中文原文：HTML5 hgroup 元素使用概述
英文原文：Avoiding common HTML5 mistakes