Revision 912699 of <article>

<h2 id="Summary">Summary</h2>

<p>The <em>HTML <code>Article</code> Element</em> (<strong>&lt;article&gt;</strong>) 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). This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <em><code>&lt;article&gt;</code></em> should be identified, typically by including a heading (<a href="/en-US/docs/Web/HTML/Element/Heading_Elements">h1-h6</a> element) as a child of the <em><code>&lt;article&gt;</code></em> element.</p>

<div class="note">
<p><strong>Usage notes:</strong></p>

<ul>
 <li>When an <code>&lt;article&gt;</code> element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be <code>&lt;article&gt;</code> elements nested in the <code>&lt;article&gt;</code> representing the blog post.</li>
 <li>Author information of an <code>&lt;article&gt;</code> element can be provided through the {{HTMLElement("address")}} element, but it doesn't apply to nested <code>&lt;article&gt;</code> elements.</li>
 <li>The publication date and time of an <code>&lt;article&gt;</code> element can be described using the {{htmlattrxref("datetime", "time")}} attribute of a {{HTMLElement("time")}} element. <em>Note that the {{htmlattrxref("pubdate", "time")}} attribute of {{HTMLElement("time")}} is no longer a part of the W3C HTML 5 standard.</em></li>
</ul>
</div>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning content, palpable content.</li>
 <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>. Note that an <code>&lt;article&gt;</code> element must not be a descendant of an {{HTMLElement("address")}} element.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>

<h2 id="Attributes">Attributes</h2>

<p><span style="line-height: 21px;">This element only includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>

<h2 id="Examples">Examples</h2>

<pre class="brush: html">&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Dinos were great!&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Way too scary for me.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt; by Lisa.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt; by Tom.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Posted on &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt; by Staff.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>5</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>11.10</td>
   <td>4.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.2</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>9.0</td>
   <td>11.0</td>
   <td>4.2</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
 <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a></li>
</ul>

<p>{{ HTMLRef }}</p>