這篇文章主要介紹了詳解HTML5中div和section以及article的區別,引自W3C的說明並且加以代碼實例列舉,需要的朋友可以參考下
剛剛開始接觸HTML5 時,對它的標籤很不適應,甚至一度有點反感。尤其是對div、section、article 這幾個標籤,實在弄不清楚應該使用在什麼場合下。
divHTML Spec:
The div element has no special meaning at all.
這個標籤是我們見得最多、用得最多的一個標籤。本身沒有任何語義,用作佈局以及樣式化或腳本的鉤子(hook)。
sectionHTML 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 就是適用的。
XML/HTML Code複製內容到剪貼板