Article element (HTML5)
HTML5 Article is a HTML5 semantic element, similar to
<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
<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.
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> <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>
<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
<section>. Both are semantic tags, defining sections in a document, such as chapters, headers, footers but the
<article> element is effectively a specialized kind of
<section> has a more specific meaning, referring to an independent, self-contained block of related content.
To better organize independent content
<section> tags can be nested inside
<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>
The following browsers have support for this element:
- 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
- "HTML5 article element - W3C". W3.org. Retrieved 2014-05-08.
- "The Article Contents element". MDN Web Docs. Retrieved 2018-07-09.
- "The article element". html5doctor.com. Retrieved 2018-07-09.
- "The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08.[unreliable source?]
- "HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08.
- "Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2018-07-09.