html5之div，article，section區別與應用

近來，發現自己編碼有個問題，對article，div，section有些亂用，索性就好好了解下他們的區別，寫個文章，好好的科普一下……

div:

hello，大家好。我叫div，對應英文單詞中的division，我是塊級元素，就是在我裡面的內容會自動開始新行，可以定義文件中的分割槽或節，把文件分割成獨立，不同的部分，我參加的國際會議是這麼介紹我的，“The div element  has no special meaning at all”。很高興我在能被很多人看重，發揮著極大的作用，但我還是有自知之明的，本身沒有什麼語義的，更適合幫你們佈局，進行樣式化。

section：

hello，ladies and gentlemen，我是section。我參加的國際會議，是這麼介紹我的，“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，“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 could be split into sections for an introduction, news items, and contact information.”我出席的場景一般是有文章的章節、標籤對話方塊中的標籤頁、或者論文中有編號的部分。一個網站的主頁可以分成簡介、新聞和聯絡資訊等幾部分。我不僅僅是一個普通的容器標籤。當一個標籤只是為了樣式化或者方便指令碼使用時，應該去找我的朋友 div 。一般來說，當元素內容明確地出現在文件大綱中時，我是很好的人選。通常會帶有標題，<section><h1></h1><p></p></section>。我會用於對網站或者應用程式中頁面上的內容進行分塊。

article：

同志們好，我是article，是特殊的section，我比section具有更明確的語義，是一個獨立的、完整的相關內容塊的代表。一般來說， 我會有標題部分(通常包含在 header 內)，有時也會 包含 footer 。雖然 section 也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，我本身就是獨立的、完整的，代表文件、頁面或者應用程式中獨立完整的可以被外部引用的內容。例如：部落格中的一篇文章，論壇中的一個帖子或者一段瀏覽者的評論等。因為article元素是一段獨立的內容，所以article元素中，通常包含頭部（header元素）、底部（footer元素）。

綜合來說，section元素的作用，是對頁面上的內容分塊處理，例如對文章分段等，相鄰的section元素的內容，應當是相關的，而不是像article那樣獨立。例如一篇文章：

  <article>
      <header><h1>計算機各類語言介紹</h1></header>
      <p>本文列舉了部分計算機語言的一些介紹</p>
      <section>
        <h2>JavaScript</h2>
        <p>js是一門……</p>
      </section>
      <section>
        <h2>HTML</h2>
        <p>HTML是一門……</p>
      </section>
      <footer>版權歸微也所有</footer>
    </article>

    很多人會說，要丟棄div,用html5的section，article，都是劃分割槽域，不是說推薦用語義化標籤麼，來佈局網頁。咳咳咳，之前我就有這麼想過，可是這就好像將ul代替table似的，也有說，儘量少用table，但是該用table還是要用的，放著方便快捷的table不用，我跑去用ul來打造表格，這似乎並不明智。該用div還是用div，進行網頁佈局，得有個規範，至少自己有個規範，然後讓其他人也能看得懂。其實三者說實在，也並沒有什麼差別，個人覺得，只是section，article更語義化了。

這就是我這篇文章想說的，也是對自己說的，敬請交流哈！