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.

Examples

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

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

Attributes

The <article> element only includes the global HTML attributes such as contenteditable, id, and title. 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.

Comparison with <section>

HTML5 introduced both <article> and <section>; both are semantic tags, defining sections in a document, such as chapters, headers, footers.[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.

Nesting examples

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

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:

Browser support

The following browsers have support for this element:

  • 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

External links

  • - the current official specification at WHATWG - 2011 official specification at W3C