div section article的區(qū)別與應用

1、說應用之前先看一下這幾個標簽的語義div這個標簽是我們見得最多、用得最多的一個標簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子(hook)。section與div的無語義相對，簡單地說section就是帶有語義的div了，但是千萬不要覺得真得這么簡單。section表示一段專題性的內容，一般會帶有標題?？吹竭@里，我們也許會想到，那么一篇博客文章，或者一條單獨的評論豈不是正好可以用section嗎？接著看：當元素內容聚合起來更加言之

2、有物時，應該使用article來替換section。那么，section應該什么時候用呢？再接著看：section應用的典型場景有文章的章節(jié)、標簽對話框中的標簽頁、或者論文中有編號的部分。一個網(wǎng)站的主頁可以分成簡介、新聞和聯(lián)系信息等幾部分。其實我對這里傳達信息很感興趣，因為感覺section和下面要介紹的artilce更加適用于模塊化應用，這個話題以后會出篇專門的文章來討論，這里暫時略過。要注意，W3C還警告說：section不僅僅是一

3、個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用div。一般來說，當元素內容明確地出現(xiàn)在文檔大綱中時，section就是適用的。articlearticle是一個特殊的section標簽，它比section具有更明確的語義它代表一個獨立的、完整的相關內容塊。一般來說，article會有標題部分(通常包含在header內)，有時也會包含footer。雖然section也是帶有主題性的一塊內容，但是無論從結構上還是內容

4、上來說，article本身就是獨立的、完整的。HTMLSpec中接著又列舉了一些article適用的場景。當article內嵌article時，原則上來說，內部的article的內容是和外層的article內容是相關的。例如，一篇博客文章中，包含用戶提交的評論的article就應該嵌套在包含博客文章article之中。問題是怎么才算“完整的獨立內容”？有個最簡單的判斷方法是看這段內容在RSSfeed中是不是完整的。看這段內容脫離了所在的

5、語境，是否還是完整的、獨立的。看完了語義下面來說一下應用其實最讓人糾結的地方在于首頁、列表頁面、專題頁面的應用。對于內容頁，毫無疑問最優(yōu)先選擇的是article標簽。下面就先簡單說一下內容頁，然后在說列表、首頁、專題等頁面應該如何使用這里左側為什么我沒有用section呢是因為這每一條都是有標題和內容完全可以作為一個article對待有一個基本原則就是在可以使用article的時候就不要使用section了.右側熱門文章是一個功能塊可以

6、獨立存在所以用了section.div的作用是用來給頁面布局.左側如果只是標題的列表而沒有內容的話就可以使用section了.當然這并不是說section不能用于有標題和內容的區(qū)域在特定情況下還是要用section的比如一篇文章內有一部分內容可以獨立出來這時候就需要用section.而不是用article嵌套article因為我們不能破壞整體我們可以理解為這篇文章有很多個section組成.section和article是可以相互嵌套的