詳解HTML5中div和section以及article的區別

這篇文章主要介紹了詳解HTML5中div和section以及article的區別,引自W3C的說明並且加以代碼實例列舉,需要的朋友可以參考下

剛剛開始接觸HTML5 時，對它的標籤很不適應，甚至一度有點反感。尤其是對div、section、article 這幾個標籤，實在弄不清楚應該使用在什麼場合下。

HTML Spec:

The div element has no special meaning at all.

這個標籤是我們見得最多、用得最多的一個標籤。本身沒有任何語義，用作佈局以及樣式化或腳本的鉤子(hook)。

HTML Spec: The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

與div 的無語義相對，簡單地說section 就是帶有語義的div 了，但是千萬不要覺得真得這麼簡單。 section 表示一段專題性的內容，一般會帶有標題。看到這裡，我們也許會想到，那麼一篇博客文章，或者一條單獨的評論豈不是正好可以用section 嗎？接著看：

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.

當元素內容聚合起來更加言之有物時，應該使用article 來替換section 。

那麼，section 應該什麼時候用呢？再接著看：

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site 's home page could be split into sections for an introduction, news items, and contact information.

section 應用的典型場景有文章的章節、標籤對話框中的標籤頁、或者論文中有編號的部分。一個網站的主頁可以分成簡介、新聞和聯繫信息等幾部分。其實我對這里傳達信息很感興趣，因為感覺section 和下面要介紹的artilce 更加適用於模塊化應用，這個話題以後會出篇專門的文章來討論，這裡暫時略過。

要注意，W3C 還警告說：

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element 's contents would be listed explicitly in the document 's outline.

section 不僅僅是一個普通的容器標籤。當一個標籤只是為了樣式化或者方便腳本使用時，應該使用div 。一般來說，當元素內容明確地出現在文檔大綱中時，section 就是適用的。