Article element

The HTML article element is semantic element, similar to <section> and <header>. Introduced in HTML5, it is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

Features and usage

The <article> element represents a complete composition in a web page or web application that is independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.^[1]

Examples

At its most basic, <article> can be used to encapsulate a body of text and a corresponding title like so:

<article>
  <h2>Insert Title Here</h2>
  <p>Insert  a paragraph of text here</p>
</article>

Forum entries and comments are typically implemented by nesting <article> tags:

<article>
  <header>
    <h1>Entry Title</h1>
    <p>Header Info</p>
  </header>
  <p>Content of entry...</p>
  <article>
    <header>
      <h2>Author: John Smith</h2>
      <p>Comment Info</p>
    </header>
    <p>Comment text...</p>
  </article>
  <article>
    <header>
      <h2>Author: Jane Johnson</h2>
      <p>2nd Comment's Info</p>
    </header>
    <p>Comment text...</p>
  </article>
</article>

Attributes

The <article> element only includes the global HTML attributes such as contenteditable, id, and title.^[2] However, pubdate, an optional boolean attribute of the <time> element, is often used in conjunction with <article>. If present, it indicates that the <time> element is the date the <article> was published. Note that pubdate applies only to the parent <article> element, or to the document as a whole.^[3]

Comparison with <section>

HTML5 introduced both <article> and <section>; both are semantic tags, defining sections in a document, such as chapters, headers, footers.^{[4][unreliable source?]} The <article> element is effectively a specialized kind of <section> and it has a more specific meaning, referring to an independent, self-contained block of related content.^[3][5]

Nesting examples

To better organize independent content <section> tags can be nested inside <article> tags:

<article>
  <h2>Names of Shapes</h2>
  <p>There are several different types of shapes...</p>
  <section>
    <h4>Triangles</h4>
    <p>Here is some info about triangles</p>
  </section>
  <section>
    <h4>Circles</h4>
    <p>These Pi-shaped wonders are mesmerizing and...</p>
  </section>
</article>

Conversely, it may sometimes be appropriate to nest an <article> element inside a <section> element. For example, in a web page containing several articles on varying subjects:

<section>
  <h1>Articles about Paris Tourism</h1>
  <article>
    <h3>The Eiffel Tower</h3>
    <p>Standing at over 12 inches high...</p> 
  </article>
  <article>
    <h3>The Louvre</h3>
    <p>A must-see in Paris tourism...</p>
  </article>
</section>

Browser support

The following browsers have support for this element:^[6]

• Desktop
  • Google Chrome 5.0 and higher
  • Firefox 4.0 and higher
  • Internet Explorer 9.0 and higher
  • Safari 4.1 and higher
  • Opera 11.1 and higher
• Mobile
  • Android 2.2 and higher
  • Firefox Mobile (Gecko) 4.0 and higher
  • IE Mobile 9.0 and higher
  • Safari Mobile 5.0 and higher
  • Opera Mobile 11.0 and higher