HTML5中div和section以及article的區別分析-H5教程-PHP中文網

這篇文章主要介紹了詳解HTML5中p和section以及article的區別,引自W3C的說明並且加以代碼實例列舉,需要的朋友可以參考下

剛開始接觸HTML5 時，對它的標籤很不適應，甚至一度有點反感。尤其是對 div、section、article 這幾個標籤，實在弄清楚應該使用在什麼場合。
div

HTML Spec:

The p element has no special meaning at all.

這個標籤是我們見得最多、用得最多的一個標籤。本身沒有任何語義，用作佈局以及樣式化或腳本的鉤子(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 的無語意相對，簡單地說section 就是帶有語意的div了，但千萬不要覺得真得這麼簡單。 section 表示一段專題性的內容，一般會帶有標題。看到這裡，我們或許會想到，那麼一篇部落格文章，或者一條單獨的評論豈不是正好可以用 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.

都會說元素的內容就聚合起來更有說。物時，應該使用article 來替換section 。

那麼，section 該什麼時候用呢？再接著看：
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 cintbe split in bar newssuction, A Web srod. items, and contact information.

section 應用程式的典型場景有文章的章節、標籤對話框中的標籤頁、或論文中有編號的部分。一個網站的主頁可以分成簡介、新聞和聯絡資訊等幾個部分。其實我對這裡傳達訊息很感興趣，因為感覺 section 和下面要介紹的 artilce 比較適用於模組化應用，這個主題以後會出篇專門的文章來討論，這裡暫時略過。

要注意，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 en or are'are the p 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 不僅僅是一個普通的容器標籤。當一個標籤只是一個普通標籤只是一個普通的容器標籤。為了樣式化或方便腳本使用時，應該使用p 。一般來說，當元素內容明確地出現在文件大綱中時，section 就是適用的。

<article>
    <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>
    <p>The apple is the pomaceous fruit of the apple tree.</p>
    <section>
        <h1>Red Delicious</h1>
        <p>These bright red apples are the most common found in many supermarkets.</p>
    </section>
    <section>
        <h1>Granny Smith</h1>
        <p>These juicy, green apples make a great filling for apple pies.</p>
    </section>
</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 reables, 片. .

article 是一個特殊的section 標籤，它比section 具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。一般來說， article 會有標題部分(通常包含在header內)，有時也會包含footer 。雖然section 也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，article 本身就是獨立的、完整的。

HTML Spec 中接著又列舉了一些article 適用的場景。

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, orany submitted comment, an interactive widget or gadget, orany submit .

當article 內嵌article 時，原則上來說，內部的article 的內容是和外層的article 內容是相關的。例如，一篇部落格文章中，包含用戶提交的評論的 article 就應該潛逃在包含部落格文章 article 之中。 ######問題是怎麼才算是「完整的獨立內容」？有個最簡單的判斷方法是看這段內容在 RSS feed 中是不是完整的。看這段內容脫離了所在的語境，是否還是完整的、獨立的。 ######範例：############

<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <footer>
        <a href="?comments=1">Show comments...</a>
    </footer>
</article>
<article>
    <header>
        <h1>The Very First Rule of Life</h1>
        <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there&#39;s a microphone anywhere near you, assume it&#39;s hot and sending whatever you&#39;re saying to the world. Seriously.</p>
    <p>...</p>
    <section>
        <h1>Comments</h1>
        <article>
            <footer>
                <p>Posted by: George Washington</p>
                <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
            </footer>
            <p>Yeah! Especially when talking about your lobbyist friends!</p>
        </article>
          <article>
            <footer>
                <p>Posted by: George Hammond</p>
                <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
            </footer>
            <p>Hey, you have the same first name as me.</p>
        </article>
    </section>
</article>

登入後複製

###總結#########p section article ，語意是從無到有，逐漸增強的。 p 無任何語義，僅用作樣式化或腳本化的鉤子(hook)，對於一段主題性的內容，則就適用section，而假如這段內容可以脫離上下文，作為完整的獨立存在的一段內容，則就適用article。原則上來說，能使用 article 的時候，也是可以使用 section 的，但是實際上，假如使用 article 更合適，那麼就不要使用 section 。 nav 和 aside 的使用也是如此，這兩個標籤也是特殊的 section，在使用 nav 和 aside 更合適的情況下，也不要使用 section 了。 ###

對於 p 和 section、 article 以及其他標籤的區分比較簡單。對於 section 和 article 的區分乍看比較難，其實重點就是看看這段內容脫離了整體是不是還能作為一個完整的、獨立的內容而存在，這裡面的重點又在完整身上。因為其實說起來 section 包含的內容也能算是獨立的一塊，但它只能算是組成整體的一部分，article 才是一個完整的整體。

因為其實有些時候每個人都有自己的看法，所以難免有難於決斷的時候，怎麼辦？

在HTML5 設計原理中，有一條是專門用來解決類似情況的：

最終用戶優先(Priority of Constituencies)

「In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到衝突，最終用戶優先，其次是作者，其次是實現者，其次標準制定者，最後才是理論上的完滿。

推薦各位多讀幾遍 HTML5 設計原理，這才是紛繁世界背後的終極奧義。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！