DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5網頁設計:hgroup元素使用
HTML5網頁設計:hgroup元素使用
編輯:HTML和Xhtml     

網頁制作Webjx文章簡介: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>.就像下圖展示的那樣子。

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

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

總結:
我們剛剛講的是如何高效的使用 <hgroup>元素。回顧一下:
.如果你只有一個標題元素(h1-h6中的一個),你並不需要<hgroup>.
.當出現一個或者一個以上的標題與元素時,適用<hgroup>來包圍他們。
.當你的有一個標題有副標題或者其它的和section或者article有關系的元數據時,將<hgroup>和元數據放到一個單獨的<header>元素容器中。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved