Rewrite of the article element definition

This definition has been re-written as an aid to discussion of how the current HTML 5.1 article definition can be improved.

last updated: 29 February 2016

github repo

related html issue

The article element

Categories:
Flow content, but with no main element descendants.
Sectioning content.
Palpable content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Tag omission in text/html:
Neither tag is omissible
Content attributes:
Global attributes
Allowed ARIA role attribute values:
article (default - do not set), application, document, main or presentation.
Allowed ARIA state and property attributes:
Global aria-* attributes
Any aria-* attributes applicable to the allowed roles.
DOM interface:
Uses {{HTMLElement}}.

The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a forum post, a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.

A general rule is that the article element is appropriate only if the element's contents would be listed explicitly in the document's outline. Each article should be identified by including a heading (h2-h6 element) as a child of the article element.

The semantics of the article element may be conveyed to users of Assistive Technology. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case matches the element name "article", can be announced by screen reader software when a users navigates to an article element. User Agents may also provide methods to navigate to article elements.

The following is an example of a blog post extract, marked up using the article element:

<article>
  <header>
   <h2><a href="http://herbert.io">Short note on wearing shorts</a></h2>
    <p>Posted on Wednesday, 10 February 2016 by Patrick Lauke.
    <a href="http://herbert.io/short-note/#comments">6 comments</a></p>
  </header>
  <p>A fellow traveller posed an interesting question: Why do you wear shorts rather than 
  longs? The person was wearing culottes as the time, so I considered the question equivocal in nature, 
  but I attempted to provide an honest answer despite the dubiousness of the questioner's dress.</p> 
  <p>The short answer is that I enjoy wearing shorts, the long answer is...</p>
  <p><a href="http://herbert.io/short-note/">Continue reading: Short note on 
  wearing shorts</a></p>
</article>

The schema.org vocabulary can be used to provide more granular information about the type of article, using the CreativeWork - Article subtypes, other information such as the publication date for the article can also be provided.

This example shows a blog post using the article element, with some schema.org annotations: 

      <article itemscope itemtype="http://schema.org/BlogPosting">
        <header>
          <h2 itemprop="headline">The Very First Rule of Life</h2>
          <p><time itemprop="datePublished" datetime="2016-02-28">3 days ago</time></p>
        </header>
        <p>If there's a microphone anywhere near you, assume it's hot and
        sending whatever you're saying to the world. Seriously.</p>
        <p>...</p>
        <footer>
          <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
        </footer>
      </article>

Here is that same blog post, but showing some of the comments: 

     <article itemscope itemtype="http://schema.org/BlogPosting">
        <header>
          <h2 itemprop="headline">The Very First Rule of Life</h2>
          <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
        </header>
         <p>If there's a microphone anywhere near you, assume it's hot and
         sending whatever you're saying to the world. Seriously.</p>
         <p>...</p>
        <section>
          <h3>Comments</h3>
          <ol>
           <li itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
              <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
              <span itemprop="name">George Washington</span>
              </span></p>
              <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
              <p>Yeah! Especially when talking about your lobbyist friends!</p>
           <li itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
              <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
              <span itemprop="name">George Hammond</span>
              </span></p>
              <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
              <p>Hey, you have the same first name as me.</p>
           </li>
         </ol>
        </section>
      </section>

Notice the use of an ordered list ol to organize the comments. Also note the comments are a subsection of the article, identified using a section element.