在HTML5中，為了使文檔的結構更加清晰明確，追加了幾個與頁眉、頁腳、內容區塊等文檔結構相關聯的結構元素。內容區塊是指將HTML頁面按邏輯分割后 的單位。例如對于書籍來說，章、節可以稱為內容區塊；對于博客網站來說，導航菜單、文章正文、文章的評論等每一個部分都可稱為內容區塊。
????? 在HTML5中新增的主體結構元素中有兩個元素分別article元素與section元素，這兩個元素是什么意思？通常用于哪些內容區塊？何時用article元素？何時用section元素？兩者之間的區別是什么？
??????一、article元素
??????article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論 或獨立的插件，或其他任何獨立的內容。除了內容部分，一個article元素通常有它自己的標題（一般放在一個header元素里面），有時還有自己的腳 注。
????? 現在，讓我們以博客為例來看一段關于article元素的代碼示例，代碼如下：
<article>
????? <header>
??????????? <h1>article元素使用方法</h1>
??????????? <p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>
????? </header>
????? <p>article元素是什么？怎樣使用article元素？……</p>
????? <footer>
??????????? <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
????? </footer>
</article>
????? 這個示例是一篇講述article元素使用方法，在header元素中嵌入了文章的標題部分，在標題下部的p元素中，嵌入了一大段該博客文章的正文，在結 尾處的footer元素中，嵌入了文章的著作權，作為腳注。整個示例的內容相對比較獨立、完整，因此，對這部分內容使用了article元素。
????? article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。例如，一篇博客文章中，針對該文章的評論就可以使用嵌套article元素的方式；用來呈現評論的article元素被包含在表示整體內容的article元素里面。
?????? 接著，讓我們來看一個關于article元素嵌套的代碼示例，代碼如下：
<article>
????? <header>
??????????? <h1>article元素使用方法</h1>
??????????? <p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>
????? </header>
????? <p>article元素是什么？怎樣使用article元素？……</p>
????? <section>
??????????? <h2>評論</h2>
??????????? <article>
????????????????? <header>
??????????????????????? <h3>發表者：shenmiweiyi</h3>
??????????????????????? <p><time pubdate datetime="2011-12-23T:21-26:00">1小時前</time></p>
????????????????? </header>
????????????????? <p>這篇文章很不錯啊，頂一下！</p>
??????????? </article>
??????????? <article>
????????????????? <header>
??????????????????????? <h3>發表者：神秘唯一</h3>
??????????????????????? <p><time pubdate datetime="2011-12-23T:21-26:00">1小時前</time></p>
????????????????? </header>
????????????????? <p>這篇文章很不錯啊，對article解釋的很詳細</p>
??????????? </article>
????? </section>
</article>
????? 這個示例中的內容比上述代碼更加完整了，它添加了文章讀者的評論內容，示例內容分為幾個部分，文章標題放在了header元素中，文章正文放在了 header元素后面的p元素中，然后section元素把正文與評論進行了區分（是一個分塊元素，用來把頁面中的內容進行區分），在section元素 中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立的、完整的，因此對它們都使用一個article元素，在評論的article元素中，又 可以分為標題與評論內容部分，分別放在header元素與p元素中。
????? 另外，article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣。代碼如下：
<article>
????? <h1>一個插件</h1>
????? <object>
??????????? <param name="allowFullScreen" vlaue="true">
??????????? <embed src="#" width="600" height="395"></embed>
????? </object>
</article>
??????二、section元素
??????section元素用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素并非一個普通的容 器元素；當一個內容需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。section元素中的內容可以單獨存儲到數據庫中 或輸出到word文檔中。
<section>
????? <h1>section元素使用方法</h1>
????? <p>什么時候用section元素？怎樣合理使用section元素?</p>
</section>
????? 通常不推薦為那些沒有標題的內容使用section元素，可以使用HTML5輪廓工具來檢查頁面中是否有標題 的section，如果使用該工具進行檢查后，發現某個section的說明中有"untitiled section"（沒有標題的section）文章，這個section就有可能使用不當。
????? section元素的作用是對頁面上的內容進行分塊，或者說對文章進行分段，請不要與有著自己的完整的、獨立的內容”的article元素混淆。
????? 下面，我們來看article元素與section元素結合使用的示例，希望能夠幫助你更好地理解article元素與section元素的區別。
<article>
????? <h1>article元素與section元素的使用方法</h1>
????? <p>何時使用article元素？何時使用section元素…..</p>
????? <section>
??????????? <h2>article元素使用方法</h2>
??????????? <p>article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。</p>
????? </section>
????? <section>
??????????? <h2>section元素使用方法</h2>
??????????? <p> section元素用于對網站或應用程序中頁面上的內容進行分塊。</p>
????? </section>
</article>
????? 上述代碼中的內容首先是一段獨立的、完整的內容，因此使用article元素。該文章分為3段，每一段都有一個獨立的標題，因此使用了兩個section 元素。請記住，對文章分段的工作也是使用section元素完成的。可能有人會問，為什么沒有對第一段使用section元素，這里其實是可以使用 section元素的，但是由于其結構比較清晰，分析器可以識別第一段內容在一個section元素里，所有也可以將第一個section元素省略，但是 第一個section元素里還要包含于section元素或子article元素，那么就必須寫明第一個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樣式的套用。

總結

以上是生活随笔為你收集整理的深入浅析HTML5中的article和section的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。