HTML5新的非主體結(jié)構(gòu)元素 hgroup元素

header元素，通過hgroup元素也能實(shí)現(xiàn)。hgroup元素的目的是將不同層級(jí)的標(biāo)題封裝成一組。通常會(huì)將h1-h6標(biāo)題進(jìn)行組合，譬如一個(gè)內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題為一組。如果要定義一個(gè)頁(yè)面的大綱，使用hgroup非常合適，如定義文章的大綱層級(jí)。代碼如下：

<hgroup>

<hl>第三節(jié)</hl>

<h2>2.5hgroup元素</h2>

</hgroup>

在以下兩種情況下，header元素和hgroup元素不能一起使用。

(1)當(dāng)只有一個(gè)標(biāo)題的時(shí)候，這兩個(gè)元素不能一起使用，代碼如下:

<header>

<hgroup>

<hl>第三節(jié)</hl>

<p>正文部分...</p>

</hgroup>

</header>

在這種情況下，只能將hgroup元素移除，僅保留其標(biāo)題元素即可。

<header>

<hi>第三節(jié)</hi> 

<p>正文部分...</p> 

</header>

(2)當(dāng)header元素的子元素只有hgroup元素的時(shí)候，這兩個(gè)元素不能一起使用，代碼如下:

<header>

<hgroup>

<hl>HTML5 hgroup元素</hl>

<h2>hgroup元素使用方法</h2>

</hgroup>

</header>

在上面的代碼中，header元素的子元素只有hgroup元素，這時(shí)并沒有其他的元素放到header中, 就可以直接將header元素去掉：代碼如下：

<hgroup>

<hl>HTML5 hgroup元素</hl> 

<h2>hgroup元素使用方法</h2> 

</hgroup>

    綜上所述，如果只有一個(gè)標(biāo)題元素，并不需要hgroup元素。當(dāng)出現(xiàn)兩個(gè)或者兩個(gè)以上的標(biāo)題元素時(shí)，適合用hgroup元素來包圍它們。當(dāng)一個(gè)標(biāo)題有副標(biāo)題或者其他的與section或者article有關(guān)的元 數(shù)據(jù)時(shí)，適合將hgraup和元數(shù)據(jù)放到一個(gè)單獨(dú)的header元素中。