詳細介紹HTML5的article和section的差異

內容區塊是指將HTML頁面依邏輯分割後的單位。對於頁面網站來說，導航選單、文章正文、文章的評論等每一個部分都可稱為內容區塊。
　　article元素
#　　article元素代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇部落格或報紙中的文章、一篇論壇貼文、一段用戶評論或獨立的插件，或其他任何獨立的內容。除了內容部分，一個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元素並非一個普通的容器元素；當一個內容需要直接定義樣式或透過腳本定義行為時，建議使用p而非section元素；

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

　　5、section元素中的內容可以單獨儲存到資料庫中或輸出到word文件中。

　<section>
　　　　<h1>section元素的</h1>标题
　　　　<p>section区块的主题部分</p>
　　</section>

在HTML5中，你可以將所有頁面的從屬部分，譬如導航條、選單、版權說明等包含一個統一的頁面中，以便統一使用CSS樣式來進行裝飾。最後，關於section元素的使用禁忌摘要如下：
1）不要將section元素用作設定樣式的頁面容器，那是p元素的工作。
2）如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。
3）不要為沒有標題的內容區塊使用section元素。
三、兩者的差別：
以上講述了那麼多，兩者的差別到底是什麼呢？事實上，在HTML5中，article元素可以看成是一種特殊類型的section元素，它比section元素更強調獨立性。即section元素強調分段或分塊，而article強調獨立性。具體來說，如果一塊內容相對來說比較獨立的、完整的時候，應該使用article元素，但是如果你想將一塊內容分成幾段的時候，應該使用section元素。另外，在HTML5中，p元素變成了一種容器，當使用CSS樣式的時候，可以對這個容器進行一個總體的CSS樣式的套用。

以上是詳細介紹HTML5的article和section的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！