
Article element

HTML5 Article is a HTML5 semantic element, similar to and . 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 HTML5 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.
Examples.
At its most basic, 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 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 element only includes the global HTML attributes such as "contenteditable", "id", and "title." However, "pubdate", an optional boolean attribute of the element, is often used in conjunction with . If present, it indicates that the element is the date the was published. Note that "pubdate" applies only to the parent element, or to the document as a whole.
Comparison with "<section>".
HTML5 introduced both and ; both are semantic tags, defining sections in a document, such as chapters, headers, footers. The element is effectively a specialized kind of and it has a more specific meaning, referring to an independent, self-contained block of related content.
Nesting examples.
To better organize independent content tags can be nested inside 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 sometime be appropriate to nest an element inside a 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: