HTML <article> 內容獨立完整的區塊

<article> 標籤 (tag) 是用來描述這一區塊的內容本身是獨立且完整的 (self-contained, standalone section),例如部落格中的一篇文章、一則留言,或像論壇中的一個回覆等。

一個頁面可以有一個或多個 <article> 只要他們是獨立且完整的內容,例如一個文章列表頁面,每篇文章都可以用一個 <article> 包起來。

舉個例子:

<h1>The Daily News</h1>

<article>
  <h2>News 1</h2>
  <!-- article content -->
</article>

<article>
    <h2>News 2</h2>
    <!-- article content -->
</article>

或:

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

可以看到上面 <article> 中也包含有標題 (h2),因為這才是所謂一個獨立完整的內容。想像如果你把 <article> 外的其他內容全部移除你也還是看得懂!

<article> 和 <section> 的差別是 article 有更高的獨立性及完整性,而 section 雖然也表示相對獨立的內容,但其內容對外層的其他內容通常還有一定的相依性。