HTML5中div、article、section三者的區(qū)別
最近正在學(xué)習(xí)html5，剛接觸html5，感覺有點(diǎn)不適應(yīng)，因?yàn)橛幸恍?biāo)簽改變了，特別是div, section article這三個(gè)標(biāo)簽，查了一些資料，也試著用html5和css3布局網(wǎng)頁，稍微有點(diǎn)頭緒了，下邊還有一個(gè)我剛剛布局好的一個(gè)簡單的網(wǎng)頁，供大家參考，先看一下，最起碼心里對html5的結(jié)構(gòu)有些概念。
div
這個(gè)標(biāo)簽是我們見得最多、用得最多的一個(gè)標(biāo)簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子(hook)。
section
與 div 的無語義相對，簡單地說 section 就是帶有語義的 div 了，但是千萬不要覺得真得這么簡單。section 表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題?？吹竭@里，我們也許會(huì)想到，那么一篇博客文章，或者一條單獨(dú)的評論豈不是正好可以用 section 嗎？
當(dāng)元素內(nèi)容聚合起來更加言之有物時(shí)，應(yīng)該使用 article 來替換 section 。
那么，section 應(yīng)該什么時(shí)候用呢？
section 應(yīng)用的典型場景有文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號的部分。一個(gè)網(wǎng)站的主頁可以分成簡介、新聞和聯(lián)系信息等幾部分。其實(shí)我對這里傳達(dá)信息很感興趣，因?yàn)楦杏X section 和下面要介紹的 artilce 更加適用于模塊化應(yīng)用，這個(gè)話題以后會(huì)出篇專門的文章來討論，這里暫時(shí)略過。
要注意，W3C 還警告說：
section 不僅僅是一個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí)，應(yīng)該使用 div 。一般來說，當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí)，section 就是適用的。
article
article 是一個(gè)特殊的 section 標(biāo)簽，它比 section 具有更明確的語義, 它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說， article 會(huì)有標(biāo)題部分(通常包含在 header 內(nèi))，有時(shí)也會(huì) 包含 footer 。雖然 section 也是帶有主題性的一塊內(nèi)容，但是無論從結(jié)構(gòu)上還是內(nèi)容上來說，article 本身就是獨(dú)立的、完整的。
當(dāng) article 內(nèi)嵌 article 時(shí)，原則上來說，內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關(guān)的。例如，一篇博客文章中，包含用戶提交的評論的 article 就應(yīng)該潛逃在包含博客文章 article 之中。
問題是怎么才算“完整的獨(dú)立內(nèi)容”？有個(gè)最簡單的判斷方法是看這段內(nèi)容在 RSS feed 中是不是完整的。看這段內(nèi)容脫離了所在的語境，是否還是完整的、獨(dú)立的。
總結(jié)：
div section article ，語義是從無到有，逐漸增強(qiáng)的。div 無任何語義，僅僅用作樣式化或者腳本化的鉤子(hook)，對于一段主題性的內(nèi)容，則就適用 section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨(dú)立存在的一段內(nèi)容，則就適用 article。原則上來說，能使用 article 的時(shí)候，也是可以使用 section 的，但是實(shí)際上，假如使用 article 更合適，那么就不要使用 section 。nav 和 aside 的使用也是如此，這兩個(gè)標(biāo)簽也是特殊的 section，在使用 nav 和 aside 更合適的情況下，也不要使用 section 了。
對于 div 和 section、 article 以及其他標(biāo)簽的區(qū)分比較簡單。對于 section 和 article 的區(qū)分乍看比較難，其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在，這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊，但是它只能算是組成整體的一部分，article 才是一個(gè)完整的整體。
div
這個(gè)標(biāo)簽是我們見得最多、用得最多的一個(gè)標(biāo)簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子(hook)。
section
與 div 的無語義相對，簡單地說 section 就是帶有語義的 div 了，但是千萬不要覺得真得這么簡單。section 表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題?？吹竭@里，我們也許會(huì)想到，那么一篇博客文章，或者一條單獨(dú)的評論豈不是正好可以用 section 嗎？
當(dāng)元素內(nèi)容聚合起來更加言之有物時(shí)，應(yīng)該使用 article 來替換 section 。
那么，section 應(yīng)該什么時(shí)候用呢？
section 應(yīng)用的典型場景有文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號的部分。一個(gè)網(wǎng)站的主頁可以分成簡介、新聞和聯(lián)系信息等幾部分。其實(shí)我對這里傳達(dá)信息很感興趣，因?yàn)楦杏X section 和下面要介紹的 artilce 更加適用于模塊化應(yīng)用，這個(gè)話題以后會(huì)出篇專門的文章來討論，這里暫時(shí)略過。
要注意，W3C 還警告說：
section 不僅僅是一個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí)，應(yīng)該使用 div 。一般來說，當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí)，section 就是適用的。
article
article 是一個(gè)特殊的 section 標(biāo)簽，它比 section 具有更明確的語義, 它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說， article 會(huì)有標(biāo)題部分(通常包含在 header 內(nèi))，有時(shí)也會(huì) 包含 footer 。雖然 section 也是帶有主題性的一塊內(nèi)容，但是無論從結(jié)構(gòu)上還是內(nèi)容上來說，article 本身就是獨(dú)立的、完整的。
當(dāng) article 內(nèi)嵌 article 時(shí)，原則上來說，內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關(guān)的。例如，一篇博客文章中，包含用戶提交的評論的 article 就應(yīng)該潛逃在包含博客文章 article 之中。
問題是怎么才算“完整的獨(dú)立內(nèi)容”？有個(gè)最簡單的判斷方法是看這段內(nèi)容在 RSS feed 中是不是完整的。看這段內(nèi)容脫離了所在的語境，是否還是完整的、獨(dú)立的。
總結(jié)：
div section article ，語義是從無到有，逐漸增強(qiáng)的。div 無任何語義，僅僅用作樣式化或者腳本化的鉤子(hook)，對于一段主題性的內(nèi)容，則就適用 section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨(dú)立存在的一段內(nèi)容，則就適用 article。原則上來說，能使用 article 的時(shí)候，也是可以使用 section 的，但是實(shí)際上，假如使用 article 更合適，那么就不要使用 section 。nav 和 aside 的使用也是如此，這兩個(gè)標(biāo)簽也是特殊的 section，在使用 nav 和 aside 更合適的情況下，也不要使用 section 了。
對于 div 和 section、 article 以及其他標(biāo)簽的區(qū)分比較簡單。對于 section 和 article 的區(qū)分乍看比較難，其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在，這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊，但是它只能算是組成整體的一部分，article 才是一個(gè)完整的整體。
中國· 上海
添加微信咨詢
關(guān)鍵詞
辦公室：上海市浦東新區(qū)郭守敬路351號
CopyRight?2009-2019 上海谷谷網(wǎng)絡(luò)科技有限公司 All Rights Reserved. 滬ICP備11022482號-8
- top
- 在線咨詢
-
添加微信咨詢