主頁 > 知識(shí)庫 > 詳解HTML5中div和section以及article的區(qū)別

詳解HTML5中div和section以及article的區(qū)別

熱門標(biāo)簽:外呼線穩(wěn)定線路 地圖標(biāo)注位置能賺錢嗎 邢臺(tái)縣地圖標(biāo)注app pageadm實(shí)現(xiàn)地圖標(biāo)注 申請(qǐng)400電話流程簡(jiǎn)介 外呼系統(tǒng)電話怎么投訴 阜陽企業(yè)外呼系統(tǒng) 南通數(shù)據(jù)外呼系統(tǒng)推廣 呼和浩特外呼電銷系統(tǒng)排名

剛剛開始接觸 HTML5 時(shí),對(duì)它的標(biāo)簽很不適應(yīng),甚至一度有點(diǎn)反感。尤其是對(duì) div、section、article 這幾個(gè)標(biāo)簽,實(shí)在弄不清楚應(yīng)該使用在什么場(chǎng)合下。
div

HTML Spec:

    The div element has no special meaning at all.

這個(gè)標(biāo)簽是我們見得最多、用得最多的一個(gè)標(biāo)簽。本身沒有任何語義,用作布局以及樣式化或腳本的鉤子(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 的無語義相對(duì),簡(jiǎn)單地說 section 就是帶有語義的 div 了,但是千萬不要覺得真得這么簡(jiǎn)單。section 表示一段專題性的內(nèi)容,一般會(huì)帶有標(biāo)題??吹竭@里,我們也許會(huì)想到,那么一篇博客文章,或者一條單獨(dú)的評(píng)論豈不是正好可以用 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.

當(dāng)元素內(nèi)容聚合起來更加言之有物時(shí),應(yīng)該使用 article 來替換 section 。

那么,section 應(yīng)該什么時(shí)候用呢?再接著看:

    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 應(yīng)用的典型場(chǎng)景有文章的章節(jié)、標(biāo)簽對(duì)話框中的標(biāo)簽頁、或者論文中有編號(hào)的部分。一個(gè)網(wǎng)站的主頁可以分成簡(jiǎn)介、新聞和聯(lián)系信息等幾部分。其實(shí)我對(duì)這里傳達(dá)信息很感興趣,因?yàn)楦杏X section 和下面要介紹的 artilce 更加適用于模塊化應(yīng)用,這個(gè)話題以后會(huì)出篇專門的文章來討論,這里暫時(shí)略過。

要注意,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 不僅僅是一個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí),應(yīng)該使用 div 。一般來說,當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí),section 就是適用的。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <article>     
  2.     <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>  
  3.     <p>The apple is the pomaceous fruit of the apple tree.</p>    
  4.     <section>    
  5.         <h1>Red Delicious</h1>    
  6.         <p>These bright red apples are the most common found in many supermarkets.</p>    
  7.     </section>    
  8.     <section>    
  9.         <h1>Granny Smith</h1>  
  10.         <p>These juicy, green apples make a great filling for apple pies.</p>    
  11.     </section>    
  12. </article>    

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 reusable, e.g. in syndication.

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ú)立的、完整的。

HTML Spec 中接著又列舉了一些 article 適用的場(chǎng)景。

    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.

當(dāng) article 內(nèi)嵌 article 時(shí),原則上來說,內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關(guān)的。例如,一篇博客文章中,包含用戶提交的評(píng)論的 article 就應(yīng)該潛逃在包含博客文章 article 之中。

問題是怎么才算“完整的獨(dú)立內(nèi)容”?有個(gè)最簡(jiǎn)單的判斷方法是看這段內(nèi)容在 RSS feed 中是不是完整的。看這段內(nèi)容脫離了所在的語境,是否還是完整的、獨(dú)立的。

例子:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <article>     
  2.     <header>    
  3.         <h1>The Very First Rule of Life</h1>    
  4.         <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>  
  5.     </header>    
  6.     <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>    
  7.     <p>...</p>    
  8.     <footer>  
  9.         <a href="?comments=1">Show comments...</a>  
  10.     </footer>    
  11. </article>  
  12.   
  13. <article>     
  14.     <header>    
  15.         <h1>The Very First Rule of Life</h1>  
  16.         <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>    
  17.     </header>  
  18.     <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>    
  19.     <p>...</p>    
  20.     <section>  
  21.         <h1>Comments</h1>    
  22.         <article>  
  23.             <footer>  
  24.                 <p>Posted by: George Washington</p>  
  25.                 <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>    
  26.             </footer>  
  27.             <p>Yeah! Especially when talking about your lobbyist friends!</p>    
  28.         </article>    
  29.           <article>  
  30.             <footer>    
  31.                 <p>Posted by: George Hammond</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>    

總結(jié)

div section article ,語義是從無到有,逐漸增強(qiáng)的。div 無任何語義,僅僅用作樣式化或者腳本化的鉤子(hook),對(duì)于一段主題性的內(nèi)容,則就適用 section,而假如這段內(nèi)容可以脫離上下文,作為完整的獨(dú)立存在的一段內(nèi)容,則就適用 article。原則上來說,能使用 article 的時(shí)候,也是可以使用 section 的,但是實(shí)際上,假如使用 article 更合適,那么就不要使用 section 。nav 和 aside 的使用也是如此,這兩個(gè)標(biāo)簽也是特殊的 section,在使用 nav 和 aside 更合適的情況下,也不要使用 section 了。

對(duì)于 div 和 section、 article 以及其他標(biāo)簽的區(qū)分比較簡(jiǎn)單。對(duì)于 section 和 article 的區(qū)分乍看比較難,其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在,這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊,但是它只能算是組成整體的一部分,article 才是一個(gè)完整的整體。

因?yàn)槠鋵?shí)有些時(shí)候每個(gè)人都有自己的看法,所以難免有難于決斷的時(shí)候,怎么辦?

在 HTML5 設(shè)計(jì)原理 中,有一條是專門用來解決類似情況的:

最終用戶優(yōu)先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到?jīng)_突,最終用戶優(yōu)先,其次是作者,其次是實(shí)現(xiàn)者,其次標(biāo)準(zhǔn)制定者,最后才是理論上的完滿。

推薦各位多讀幾遍 HTML5 設(shè)計(jì)原理,這才是紛繁世界背后的最終奧義。

標(biāo)簽:辛集 內(nèi)蒙古 楊凌 鶴崗 德州 蚌埠 黃山 撫順

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解HTML5中div和section以及article的區(qū)別》,本文關(guān)鍵詞  詳解,HTML5,中,div,和,section,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解HTML5中div和section以及article的區(qū)別》相關(guān)的同類信息!
  • 本頁收集關(guān)于詳解HTML5中div和section以及article的區(qū)別的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章