Movatterモバイル変換


[0]ホーム

URL:


  1. 給開發者的 Web 技術文件
  2. HTML:超文本標記語言
  3. HTML 參考
  4. Elements
  5. <article>

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in EnglishAlways switch to English

<article>:文章內容元素

Baseline Widely available

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

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

嘗試一下

<article>  <h1>Weather forecast for Seattle</h1>  <article>    <h2>03 March 2018</h2>    <p>Rain.</p>  </article>  <article>    <h2>04 March 2018</h2>    <p>Periods of rain.</p>  </article>  <article>    <h2>05 March 2018</h2>    <p>Heavy rain.</p>  </article></article>
.forecast {  margin: 0;  padding: 0.3rem;  background-color: #eee;}.forecast > h1,.day-forecast {  margin: 0.5rem;  padding: 0.3rem;  font-size: 1.2rem;}.day-forecast {  background: right/contain content-box border-box no-repeat    url("/shared-assets/images/examples/rain.svg") white;}.day-forecast > h2,.day-forecast > p {  margin: 0.2rem;  font-size: 1rem;}

一個文件可以包含多個文章;例如,在一個按讀者滾動顯示每篇文章文本的部落格上,每篇文章都可以包含在<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>  <h2>Jurassic Park</h2>  <section>    <h3>Review</h3>    <p>Dinos were great!</p>  </section>  <section>    <h3>User reviews</h3>    <article>      <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>      <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

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp