The 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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
Content categories | Flow content, sectioning content, palpable content |
---|---|
Permitted content | Flow 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> element. |
Implicit ARIA role | article |
Permitted ARIA roles | application , document , feed , main , none , presentation , region |
DOM interface | HTMLElement |
Attributes
This element only includes the global attributes.
Usage notes
- Each
<article>
should be identified, typically by including a heading (<h1>
-<h6>
element) as a child of the<article>
element. - When an
<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. - Author information of an
<article>
element can be provided through the<address>
element, but it doesn't apply to nested<article>
elements. - The publication date and time of an
<article>
element can be described using thedatetime
attribute of a<time>
element. Note that thepubdate
attribute of<time>
is no longer a part of the W3C HTML5 standard.
Examples
<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>
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<article>' in that specification. |
Living Standard | |
HTML 5.1 The definition of '<article>' in that specification. |
Recommendation | |
HTML5 The definition of '<article>' in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
article | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 11.1 | Safari Full support 5 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 11.1 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support