HTML
<article>
element
represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an
<article>
element, possibly with one or more
<section>
s within.
| 内容类别 | 流内容 , 区间内容 , palpable content |
|---|---|
| 准许内容 | 流内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
flow content
. Note that an
<article>
element must not be a descendant of an
<address>
元素。
|
| Implicit ARIA role |
文章
|
| Permitted ARIA roles |
application
,
document
,
feed
,
main
,
none
,
presentation
,
region
|
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
<article>
should be identified, typically by including a heading (
<h1>
-
<h6>
element) as a child of the
<article>
元素。
<article>
element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be
<article>
elements nested in the
<article>
representing the blog post.
<article>
element can be provided through the
<address>
element, but it doesn't apply to nested
<article>
元素。
<article>
element can be described using the
datetime
attribute of a
<time>
元素。
注意，
pubdate
attribute of
<time>
is no longer a part of the
W3C
HTML5
标准。
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<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">
<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>
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
文章
|
Chrome 完整支持 5 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 9 | Opera 完整支持 11.1 | Safari 完整支持 5 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 11.1 | Safari iOS 完整支持 4.2 | Samsung Internet Android 完整支持 Yes |
完整支持
<body>
,
<nav>
,
<section>
,
<aside>
,
<h1>
,
<h2>
,
<h3>
,
<h4>
,
<h5>
,
<h6>
,
<hgroup>
,
<header>
,
<footer>
,
<address>