Menu
Home Explore People Places Arts History Plants & Animals Science Life & Culture Technology
On this page
Article element
Special HTML tag

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.

We don't have any images related to Article element yet.
We don't have any YouTube videos related to Article element yet.
We don't have any PDF documents related to Article element yet.
We don't have any Books related to Article element yet.
We don't have any archived web articles related to Article element yet.

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.56

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:7

  • Desktop
  • 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. http://www.w3.org/TR/html5/sections.html#the-article-element

  2. "The Article Contents element". MDN Web Docs. Retrieved 2018-07-09. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

  3. "The article element". html5doctor.com. Retrieved 2018-07-09. http://html5doctor.com/the-article-element/

  4. "The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08. https://www.w3schools.com/tags/tag_section.asp

  5. "The article element". html5doctor.com. Retrieved 2018-07-09. http://html5doctor.com/the-article-element/

  6. "HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08. http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

  7. "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2018-07-09. http://caniuse.com/#search=article