HTML <article> 標籤

<article>是HTML5新增的語義化標籤之一。

關於語義化標籤的概念與作用可以參閱HTML 語義化佈局概述一章節。

一.<article>標籤作用：

此標籤表示一個相對獨立與完整的內容塊，具有比較完整的語義。

比如頁面中的一篇文章，或者文章底部一條完整的評論。

<article>標籤除去包括內容外，通常還會包括標題（通常會放在<header>中）或者<footer>頁尾。

二.程式碼片段：

下面通過簡單程式碼片段對此標籤的應用做一下介紹。

[HTML] 純文字檢視 複製程式碼
<article>
  <h1>HTML語義化佈局</h1>
  <p>文章內容</p>
  <footer>
    <p><small>版權：前端教程，作者：螞蟻部落</small></p>
  </footer>
</article>

程式碼分析如下：

（1）.<article>標籤包括生成一篇文章，很明顯這是一個相對獨立的內容區域。

（2）.<h1>定義文章的標題，前面說過標題通常會放入<header>中，這並非硬性規定，需要靈活應用。

（3）.<p>元素中放置的是文章的內容。

（4）.文章的版權資訊放置於<footer>標籤中。

對上面的程式碼做一下修改：

[HTML] 純文字檢視 複製程式碼
<article>
  <header>
    <h1>HTML語義化佈局</h1>
    <p>釋出時間：<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章內容</p>
  <footer>
    <p><small>版權：前端教程，作者：螞蟻部落</small></p>
  </footer>
</article>

上面程式碼中，標題用<header>標籤包括起來就比較恰當了，前一個程式碼完全沒有必要。

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

<article>內部可以巢狀<article>，內層的內容與外層內容相關。

上面程式碼中，外層是文章主體部分，被巢狀的<article>中是文章的評論。

其實上面的程式碼還可以再改進一下，程式碼如下：

[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>

<article>與<section>功能比較類似，<article>標籤強調獨立性，語義更加明確。

可以認為<article>是一個特殊的<section>，能用<article>地方也可以用<section>。

將評論用<section>標籤包裹起來，雖然用<article>也沒什麼不妥，但是<section>更加合適。

<section>語義沒有<artice>明確，更強調對一個完整內容進行分割槽，比如文章的段落。

評論區中的每一條評論可以看做一個完整的內容，所以可以用<article>標籤包裹。

關於<section>用法可以參閱HTML <section> 標籤一章節。