<article>:文章內容元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<article> HTML 元素代表文件、頁面、應用程式或站點中的一個獨立組成部分,該部分旨在獨立分發或重複使用(例如,在聯合編輯中)。例如:論壇帖子、雜誌或報紙文章、部落格文章、產品卡片、用戶提交的評論、互動小工具或小裝置,或任何其他獨立的內容項目。

嘗試一下

一個文件可以包含多個文章;例如,在一個按讀者滾動顯示每篇文章文本的部落格上,每篇文章都可以包含在 <article> 元素中,可能包含一個或多個 <section>

內容類型 流內容章節型內容捫及內容
允許的內容 流內容
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受流內容 的元素。請注意,<article> 元素不得是 <address> 元素的子孫。
隱含 ARIA 角色 article
允許的 ARIA 角色 applicationdocumentfeedmainnonepresentationregion
DOM 介面 HTMLElement

屬性

此元素僅包含全域屬性

使用注意事項

  • 每個 <article> 應該被識別,通常通過在 <article> 元素的子元素中包含標題(<h1> - <h6> 元素)。
  • 當嵌套 <article> 元素時,內部元素代表與外部元素相關的文章。例如,部落格文章的評論可以是嵌套在表示部落格文章的 <article> 中的 <article> 元素。
  • <article> 元素的作者信息可以通過 <address> 元素提供,但不適用於嵌套的 <article> 元素。
  • <article> 元素的發佈日期和時間可以使用 <time> 元素的 datetime 屬性來描述。

範例

html
<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

結果

規範

Specification
HTML
# the-article-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
article

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見