詳解HTML5中div和section以及article的差異_html5教學技巧

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

HTML Spec:

    The div element has no special meaning at all.

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

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 section for sis. A Web site's home page could be split into section for s​​id andacted 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 or as a convenience for scripting, authors are encouraged to is the divor iswional. the element's contents would be listed explicitly in the document's outline.」

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

XML/HTML Code複製內容到剪貼簿

1. 文章>     
     
2.     hgroup>  >蘋果h1> h2>美味又美味的水果！ h2> hgroup>   
    
3. p>蘋果是蘋果樹的果仁。 p>    
    
4. 部分>    
        
5. h1>紅好吃>             
p
6. >這些鮮紅的蘋果是許多超市中最常見的蘋果。 p>         
部分
7. >         
部分
8. >             
h1
9. >奶奶>奶奶奶奶>           
10. p>這些多汁的蘋果是蘋果派的絕佳餡料。 p>         
11. 部分>    
12. 文章>            

article

HTML Spec:

    The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reable, edicor. reable.

article 是一個特殊的 section 標籤，它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容區塊。一般來說， article 會有標題部分(通常包含在 header 內)，有時也會 包含 footer 。雖然 section 也是帶有主題性的一塊內容，但無論從結構上或內容上來說，article 本身就是獨立的、完整的。

HTML Spec 中接著又列舉了一些 article 適用的場景。

    This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content。

當 article 內嵌 article 時，原則上來說，內部的 article 的內容是和外層的 article 內容是相關的。例如，一篇部落格文章中，包含用戶提交的評論的 article 就應該潛逃在包含部落格文章 article 之中。

問題是怎麼才算「完整的獨立內容」？有個最簡單的判斷方法是看這段內容在 RSS feed 中是不是完整的。看這段內容脫離了所在的語境，是否還是完整的、獨立的。

範例：

XML/HTML Code

複製內容到剪貼簿

1. 文章>     
     
2.     標題>
3.              h1>人生第一法則 h1>
4.              p>>日期時間="2009-10-09T14:28-08:00">時間>p>  
5.     標題>    
6.     p>如果您附近的任何地方有麥克風，則假設天氣很熱您發送任何內容正在對世界說。 說真的。 p>    
7.     p>... p>    
8.     頁腳> 
9.         a href href ">顯示註解...a> 🎜>>
  
10.     頁腳> 
11. 文章>  
12.   
13. 文章>     
     
14.     標題>
    
15.         h1>人生第一法則 h1>
  
16.         p>>日期時間="2009-10-09T14:28-08:00">時間>p>  
17.     標題>  
18.     p>如果您附近的任何地方有麥克風，則假設天氣很熱您發送任何內容正在對世界說。 說真的。 p>    
19.     p>... p>    
20.     部分>  
21.         h1>評論>評論>> 🎜>>
    
22.         文章>
 🎜>
23. > 🎜>>              
頁腳
24. >頁腳>頁腳>               p>
p
25. >p>p>                   ppp日期時間=
"2009-10-10T19:10-08:00"
26. >時間>p>
27.                頁腳>頁腳>頁腳>            
28. p>是啊！ 尤其是在談論您的遊說朋友時！ p
29. >             文章
30. >             文章>
31.                頁腳>頁腳>頁腳               
p>發布者：喬治·哈蒙德p>  
32.                 p>time pubdate datetime="2009-10-10T19:15-08:00">time>p>  
33.             footer>  
34.             p>Hey, you have the same first name as me.p>  
35.         article>    
36.     section>    
37. article>    

总结

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法，所以难免有难于决断的时候，怎么办？

在 HTML5 设计原理 中，有一条是专门用来解决类似情况的：

最终用户优先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理，这才是纷繁世界背后的最终奥义。