這篇文章主要介紹“HTML5中div和section及article的區別是什么”，在日常操作中，相信很多人在HTML5中div和section及article的區別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5中div和section及article的區別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創新互聯專注于新縣網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供新縣營銷型網站建設，新縣網站制作、新縣網頁設計、新縣網站官網定制、重慶小程序開發公司服務，打造新縣網絡公司原創品牌,更為您提供新縣網站排名全網營銷落地服務。

HTML規范：

    div元素根本沒有特殊含義。

這個標簽是我們見得最多，用得最多的一個標簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子（鉤）。部分

HTML規范：“ section元素代表文檔或應用程序的通用部分。在這種情況下，一節是內容的主題分組，通常帶有標題。”

與div的無語義相對，簡單地說section就是帶有語義的div了，但是千萬不要覺得真得這么簡單。section表示一段主題性的內容，一般會帶有標題。看到這里，我們也許會想到，那么文章博客文章，或者一條單獨的評論豈不是正好可以用section嗎？然后看：

    鼓勵作者聯合元素的內容時，請使用article元素而不是section元素。

當元素內容聚合起來更加言之有物時，應該使用文章來替換section。

那么，section應該什么時候用呢？再接著看：

    部分的示例包括章節，選項卡式對話框中的各個選項卡式頁面或論文的編號部分。網站的主頁可以分為幾個部分，以進行介紹，新聞和聯系信息。

部分應用的典型場景有文章的章節，章節和標簽中間的標簽頁，或者論文中有編號的部分。一個網站的主頁可以互換簡介，新聞和聯系信息等幾部分。實際上我對這里傳達信息很感興趣，因為感覺部分和下面要介紹的artilce更加適用于替代應用，這個話題以后會出篇專門的文章來討論，這里暫時略過。

要注意，W3C還警告說：

    section元素不是通用容器元素。如果出于樣式目的或為了方便編寫腳本而需要某個元素，則鼓勵作者改用div元素。一般規則是，只有在文檔的大綱中明確列出該元素的內容時，section元素才適用。”

一般來說，當元素內容明確地出現在文檔大綱中時，section就是適用的。

XML / HTML代碼將內容復制到文本

<文章>     

    < hgroup > < h2 >蘋果</ h2 > < h3 >美味可口的水果！</ h3 > </ hgroup >     

    < p >蘋果是蘋果樹的梨果果。</ p >    

    <部分>    

        < h2 >紅色美味</ h2 >    

        < p >這些明亮紅蘋果是最常見的在許多超市發現。</ p >    

    </部分>    

    <部分>    

        < h2 >格蘭尼&middot;史密斯</ h2 >  

        < p >這些多汁，青蘋果做出蘋果派一個偉大的填充。</ p >    

    </部分>    

</ article >    

文章

HTML規范：

    文章元素表示文檔，頁面，應用程序或站點中的獨立組成，并且原則上可以獨立分發或重用，例如在聯合組織中。

一般來說，文章會有一個標題部分（通常包含在header內），有時也會包含頁腳。雖然部分也是也是主題性質的一塊內容，但是無論從結構上還是內容上來說，文章本身就是獨立的，完整的。

HTML Spec中隨后又列出了一些文章適用的場景。

    這可能是論壇帖子，雜志或報紙文章，博客條目，用戶提交的評論，交互式小部件或小工具或任何其他獨立的內容。

當文章內嵌文章時，原則上來說，內部的文章的內容是和外層的文章內容是相關的。例如，文章博客文章中，包含用戶提交的評論的文章就應該潛逃在包含博客文章文章之中。

問題是怎么才算“完整的獨立內容”？有個最簡單的判斷方法是看這段內容在RSS feed中是不是完整的。看這段內容脫離了所在的語境，是否還是完整的，獨立的。

例子：

XML / HTML代碼將內容復制到文本

<文章>     

    <標題>    

        < h2 >人生第一法則</ h2 >    

        < p > <時間 pubdate的 日期時間= “2009-10-09T14：28-08：00” > </時間> </ p >  

    </標頭>    

    < p >如果您附近有麥克風，請假設它很熱，然后將您要說的話發送給全世界。說真的 </ p >    

    < p > ... </ p >    

    <頁腳>  

        <一個HREF = “？注釋= 1” >顯示注釋... </一>   

    </ footer >    

</ article >  

<文章>     

    <標題>    

        < h2 >人生第一法則</ h2 >  

        < p > <時間 pubdate的 日期時間= “2009-10-09T14：28-08：00” > </時間> </ p >    

    </標頭>  

    < p >如果您附近有麥克風，請假設它很熱，然后將您要說的話發送給全世界。說真的 </ p >    

    < p > ... </ p >    

    <部分>  

        < h2 >評論</ h2 >    

        <文章>  

            <頁腳>  

                < p >發布者：George Washington </ p >  

                < p > <時間 pubdate的 日期時間= “2009-10-10T19：10-08：00” > </時間> </ p >    

            </ footer >  

            < p >呀！特別是在談論您的說客朋友時！</ p >    

        </ article >    

          <文章>  

            <頁腳>    

                < p >發布者：George Hammond </ p >  

                < p > <時間 pubdate的 日期時間= “2009-10-10T19：15-08：00” > </時間> </ p >  

            </ footer >  

            < p >嗨，你有相同的名字和我。</ p >  

        </ article >    

    </部分>    

</ article >    

到此，關于“HTML5中div和section及article的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

網站名稱：HTML5中div和section及article的區別是什么
文章源于：http://m.newbst.com/article18/pepcdp.html

成都網站建設公司_創新互聯，為您提供建站公司、標簽優化、響應式網站、營銷型網站建設、企業網站制作、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯