HTML5的article和section的區別

2024-04-27 15:16:58

字體：大中小

來源：轉載

供稿：網友

原文鏈接：http://www.cnblogs.com/9521yjq/p/5585574.html

http://playkid.blog.163.com/blog/static/5628726020121090735252/

HTML5的article和section的區別

內容區塊是指將HTML頁面按邏輯分割后的單位。對于頁面網站來說，導航菜單、文章正文、文章的評論等每一個部分都可稱為內容區塊。

div（分區division）　　這個標簽是我們見得最多、用得最多的一個標簽，以至于Div+CSS成了HTML網頁設計的標準。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子。　　HTML Spec：The div element has no special meaning at all.　　section（章節）　　簡單地說section就是帶有語義的div，<div class="section"></div>相當于<section id=""></section>。　　section表示一段專題性的內容，一般會帶有標題。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用div。一般來說，當元素內容明確地出現在文檔大綱、文章章節、博客條目、用戶評論部分或者論文中有編號的部分時，section就是適用的。　　article（文章）　　article是一個特殊的section標簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊。　 article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其他任何獨立的內容。如果元素的內容集中到一起顯示可以表達相對獨立完整的意思，那就可以定義成article。nav和aside的使用也是如此，這兩個標簽也是特殊的section。除了內容部分，一個article元素通常有它自己的標題（一般放在一個header元素里面），有時還有自己的腳注。<article> <header> 　　　　<h1>標題</h1> <p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>　　</header>

　　<p>article的使用方法</p> 　　<footer> <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>　　</footer></article> 注：article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。例如，一篇博客文章中，針對該文章的評論就可以使用嵌套article元素的方式；用來呈現評論的article元素被包含在表示整體內容的article元素里面。嵌套的代碼如下：<article>

　　<header> <h1>article元素使用方法</h1>　　　　<p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>　　</header>

　　<p>此標簽里顯示的是article整個文章的主要內容，，下面的section元素里是對該文章的評論</p> 　　<section> <h2>評論</h2>　　　　<article> <header>　　　　　　　　<h3>發表者：maizi</h3>　　　　　　　　<p><time pubdate datetime="2016-6-14">1小時前</time></p>　　　　　　</header> 　　　　　　<p>這篇文章很不錯啊，頂一下！</p> </article> 　　　　<article> <header> 　　　　　　　　<h3>發表者：小妮</h3> <p><time pubdate datetime="2016-6-14T:21-26:00">1小時前</time></p>　　　　　　</header>　　　　<p>這篇文章很不錯啊，對article解釋的很詳細</p> 　　　　</article> </section></article> 　　示例內容分為幾個部分，文章標題放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文與評論進行了區分（是一個分塊元素，用來把頁面中的內容進行區分），在section元素中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立的、完整的，因此對它們都使用一個article元素，在評論的article元素中，又可以分為標題與評論內容部分，分別放在header元素與p元素中。　　1、section元素用于對網站或應用程序中頁面上的內容進行分塊，section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，；

　　2、一個section元素通常由內容及其標題組成。通常不推薦為那些沒有標題的內容使用section元素，

　　3、section元素并非一個普通的容器元素；當一個內容需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素；

　　4、如果article、nav、aside元素都符合某條件，那么就不要用section元素定義；

　　5、section元素中的內容可以單獨存儲到數據庫中或輸出到Word文檔中。

　　<section>　　　　<h1>section元素的</h1>標題　　　　<p>section區塊的主題部分</p>　　</section> 在HTML5中，你可以將所有頁面的從屬部分，譬如導航條、菜單、版權說明等包含一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。

最后，關于section元素的使用禁忌總結如下： 1）不要將section元素用作設置樣式的頁面容器，那是div元素的工作。 2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。 3）不要為沒有標題的內容區塊使用section元素。三、兩者的區別：事實上，在HTML5中，article元素可以看成是一種特殊類型的section元素，它比section元素更強調獨立性。即section元素強調分段或分塊，而article強調獨立性。具體來說，如果一塊內容相對來說比較獨立的、完整的時候，應該使用article元素，但是如果你想將一塊內容分成幾段的時候，應該使用section元素。另外，在HTML5中，div元素變成了一種容器，當使用CSS樣式的時候，可以對這個容器進行一個總體的CSS樣式的套用。