Article element

HTML5 Article is a HTML5 semantic element, similar to <section> and <header>. 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 <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 sometime 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

References

1. "HTML5 article element - W3C". W3.org. Retrieved 2014-05-08.
2. "The Article Contents element". MDN Web Docs. Retrieved 2018-07-09.
3. "The article element". html5doctor.com. Retrieved 2018-07-09.
4. "The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08.
5. "HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08.
6. "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2018-07-09.

External links

• Rich Snippet Wordpress Plugins