<section>與<article> 區別

<section>與<article>都是為更為精確語義化佈局而生，兩者相同之處。

自然也有不同點，否則建立兩個標籤就多此一舉了，下面詳細做一下介紹。

一.兩者關係闡述：

（1）.article：翻譯成漢語具有"文章"的意思。

（2）.section：翻譯成漢語局域"章"或者"節"的意思。

如果說<article>標籤是一篇文章的話，那麼<section>標籤就是其中的一個段落或者一個小章節。

當然你不能因此說，<article>與<section>兩者是從屬關係，它們兩個是可以相互巢狀的。

兩個標籤的異同點簡單總結如下：

（1）.<article>是一種特殊的<section>，用<article>都可以用<section>。

（2）.<article>強調整體性與獨立性，語義更加明確。

（3）.<section>強調的是對整體內容進行劃分割槽域，獨立性和語義明確性比<article>差。

特別說明：兩標籤都是為頁面佈局語義化更強，在表現上並沒有任何特殊之處，和一個普通div相同。

二.程式碼片段：

下面通過一段簡單的程式碼片段對兩者的區別進行一下分析。

[HTML] 純文字檢視 複製程式碼
<article>
  <header>
    <h1>HTML語義化佈局</h1>
    <p>釋出時間：<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章內容</p>
  <section>
    <h2>評論</h2>
    <article>
      <header>
        <h3>評論者: 螞蟻部落</h3>
        <p><time datetime="2019-8-1">一分鐘前</time></p>
      </header>
      <p>評論內容</p>
     </article>
  </section>
</article>

上述程式碼有兩個標籤的應用，分析如下：

（1）.總體上市一篇文章，很明顯具有很好的獨立性，所以最外層用<article>包裹比較恰當。

（2）.文章的評論屬於文章的一個一部分或者一個功能分割槽，所以使用<section>包裹。

（3）.文章評論的單獨一條可以看做一個獨立的整體，所以使用<article>更為恰當。