Article element

<h2 id="features-and-usage">Features and usage</h2>
<p>The <article> element represents a complete composition in a <a href="/facts/Web_page/5JK7xQLe">web page</a> or <a href="/facts/Web_application/BLkF3BIN">web application</a> 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.<a class="footnote-ref" id="fnref:1" href="#fn:1"><sup>1</sup></a>
</p>
<h3>Examples</h3>
<p>At its most basic, <article> can be used to encapsulate a body of text and a corresponding title like so:
</p>
<article>
  <h2>Insert Title Here</h2>
  <p>Insert  a paragraph of text here</p>
</article>

<p>Forum entries and comments are typically implemented by nesting <article> tags:
</p>
<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>

<h3>Attributes</h3>
<p>The <article> element only includes the global <a href="/facts/HTML_attribute/0zRQefTK">HTML attributes</a> such as <i>contenteditable</i>, <i>id</i>, and <i>title.</i><a class="footnote-ref" id="fnref:2" href="#fn:2"><sup>2</sup></a> However, <i>pubdate</i>, an optional <a href="/facts/Boolean_data_type/0GWYLDoC">boolean</a> 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 <i>pubdate</i> applies only to the parent <article> element, or to the document as a whole.<a class="footnote-ref" id="fnref:3" href="#fn:3"><sup>3</sup></a>
</p>
<h2 id="comparison-with-section">Comparison with <i><section></i></h2>
<p>HTML5 introduced both <article> and <section>; both are semantic tags, defining sections in a document, such as chapters, headers, footers.<a class="footnote-ref" id="fnref:4" href="#fn:4"><sup>4</sup></a>[<i>unreliable source?</i>] 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.<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a><a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a>
</p>
<h3>Nesting examples</h3>
<p>To better organize independent content <section> tags can be nested inside <article> tags:
</p>
<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>

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

<h2 id="browser-support">Browser support</h2>
<p>The following browsers have support for this element:<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a>
</p>
<ul><li>Desktop
<ul><li><a href="/facts/Google_Chrome/4INfWq37">Google Chrome</a> 5.0 and higher</li>
<li><a href="/facts/Firefox/xez2zv8H">Firefox</a> 4.0 and higher</li>
<li><a href="/facts/Internet_Explorer/uL8a4Y5l">Internet Explorer</a> 9.0 and higher</li>
<li><a href="/facts/Safari_(web_browser)/9R8v7tNl">Safari</a> 4.1 and higher</li>
<li><a href="/facts/Opera_(web_browser)/2NYCcTj1">Opera</a> 11.1 and higher</li></ul></li>
<li>Mobile
<ul><li><a href="/facts/Android_(operating_system)/nNyHb0xz">Android</a> 2.2 and higher</li>
<li>Firefox Mobile (Gecko) 4.0 and higher</li>
<li>IE Mobile 9.0 and higher</li>
<li>Safari Mobile 5.0 and higher</li>
<li>Opera Mobile 11.0 and higher</li></ul></li></ul>

<h2 id="external-links">External links</h2>
<ul><li><a href="https://html.spec.whatwg.org/multipage/sections.html#the-article-element">The article element</a> - the current official specification at <a href="/facts/WHATWG/WoyKwRJR">WHATWG</a>
<ul><li><a href="https://www.w3.org/TR/2011/WD-html5-author-20110809/the-article-element.html">The article element</a> - 2011 official specification at <a href="/facts/World_Wide_Web_Consortium/lGWmhF6M">W3C</a></li></ul></li>
<li><a href="https://designgrande.com/best-rich-snippets-wordpress-plugins/">Rich Snippet Wordpress Plugins</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>"HTML5 article element - W3C". W3.org. Retrieved 2014-05-08. <a href="http://www.w3.org/TR/html5/sections.html#the-article-element" target="_blank">http://www.w3.org/TR/html5/sections.html#the-article-element</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>"The Article Contents element". MDN Web Docs. Retrieved 2018-07-09. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
<li id="fn:3"><p>"The article element". html5doctor.com. Retrieved 2018-07-09. <a href="http://html5doctor.com/the-article-element/" target="_blank">http://html5doctor.com/the-article-element/</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li>
<li id="fn:4"><p>"The section tag". W3Schools. 2014-04-30. Retrieved 2014-05-08. <a href="https://www.w3schools.com/tags/tag_section.asp" target="_blank">https://www.w3schools.com/tags/tag_section.asp</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li>
<li id="fn:5"><p>"The article element". html5doctor.com. Retrieved 2018-07-09. <a href="http://html5doctor.com/the-article-element/" target="_blank">http://html5doctor.com/the-article-element/</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li>
<li id="fn:6"><p>"HTML5: Section or Article?". Iandevlin.com. 2013-08-19. Retrieved 2014-05-08. <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article" target="_blank">http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li>
<li id="fn:7"><p>"Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2018-07-09. <a href="http://caniuse.com/#search=article" target="_blank">http://caniuse.com/#search=article</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li>
</ol>

Article element open-in-new

Article element