<article>:文章內容元素
<article>
HTML 元素代表文件、頁面、應用程式或站點中的一個獨立組成部分,該部分旨在獨立分發或重複使用(例如,在聯合編輯中)。例如:論壇帖子、雜誌或報紙文章、部落格文章、產品卡片、用戶提交的評論、互動小工具或小裝置,或任何其他獨立的內容項目。
嘗試一下
一個文件可以包含多個文章;例如,在一個按讀者滾動顯示每篇文章文本的部落格上,每篇文章都可以包含在 <article>
元素中,可能包含一個或多個 <section>
。
內容類型 | 流內容、章節型內容、捫及內容 |
---|---|
允許的內容 | 流內容。 |
標籤省略 | None, both the starting and ending tag are mandatory. |
允許的父元素 |
任何接受流內容 的元素。請注意,<article> 元素不得是
<address> 元素的子孫。
|
隱含 ARIA 角色 | article (en-US) |
允許的 ARIA 角色 | application (en-US)、document (en-US)、feed (en-US)、main (en-US)、none (en-US)、presentation (en-US)、region (en-US) |
DOM 介面 | HTMLElement (en-US) |
屬性
此元素僅包含全域屬性 (en-US)。
使用注意事項
- 每個
<article>
應該被識別,通常通過在<article>
元素的子元素中包含標題(<h1>
-<h6>
(en-US) 元素)。 - 當嵌套
<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 Standard # the-article-element |
瀏覽器相容性
BCD tables only load in the browser