GeezerVison

The HTML article element is a 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.

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]

<article>
  <h2>Insert Title Here</h2>
  <p>Insert  a paragraph of text here</p>
</article>

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

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

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

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

• The article element - the current official specification at WHATWG
  • The article element - 2011 official specification at W3C
• Rich Snippet Wordpress Plugins