1. 程式人生 > >[html5]HTML5中<section>和<article>的區別

[html5]HTML5中<section>和<article>的區別

行為 article 數據 作用 get section 就是 內容 應用程序

一、section元素

從字面理解就是區塊、部分的意思,相對於article元素更加廣泛,每個區塊都可以使用,比如頁面裏的導航菜單、文章正文、文章的評論等。

1、section元素用於對網站或應用程序中頁面上的內容進行分塊,section元素的作用是對頁面上的內容進行分塊,或者說對文章進行分段,;

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

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

4、如果article、nav、aside元素都符合某條件,那麽就不要用section元素定義;

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

二、article元素

article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件,或其他任何獨立的內容。除了內容部分,一個article元素通常有它自己的標題(一般放在一個header元素裏面),有時還有自己的腳註。

註:article元素是可以嵌套使用的,內層的內容在原則上需要與外層的內容相關聯。例如,一篇博客文章中,針對該文章的評論就可以使用嵌套article元素的方式;用來呈現評論的article元素被包含在表示整體內容的article元素裏面。

<html>
 <head></head>
 <body>
  <article>
      
   <header> 
    <h1>article元素使用方法</h1>    
    <p>發表日期:<time pubdate="pubdate">2017/2/9</time></p>   
   </header>   
   <p>此標簽裏顯示的是article整個文章的主要內容,,下面的section元素裏是對該文章的評論</
p>    <section> <h2>評論</h2>     <article> <header>          <h3>發表者:Galin</h3>          <p>1小時前</p>       </header>       <p>這篇文章很不錯啊,頂一下!</p> </article>      <article> <header>        <h3>發表者:木木</h3> <p>1小時前</p>       </header>      <p>這篇文章很不錯啊,對article解釋的很詳細</p>      </article> </section> </article> </body> </html>

轉自:http://www.divcss5.com/html5/h18219.shtml

[html5]HTML5中<section>和<article>的區別