Summary

Use the article element to identify self-contained articles of content within a digital publication.

Techniques

• Use the article element for self-contained articles, such as found in magazines, journals, and newspapers. [[WCAG-1.3.1]]

• Include a heading for each article [[WCAG-1.3.1]]

• Use the aside element for secondary material within an article, such as sidebars. [[WCAG-1.3.1]]

Examples

<article>
   <header>
      <h2>The Deterrent Effects of Slap-Induced Cranial Trauma</h2>
      <p class="byline">M. Howard, C. Howard, and L. Fine</p>
      <p class="id">DOI: <a href="https://dx.doi.org/10xxx/"
         >https://dx.doi.org/10xxx/</a></p>
   </header>
   <section id="abstract" role="doc-abstract">
      <p>… </p>
   </section>
   …
</section>

Frequently Asked Questions

Should I use aside or article?

The aside element is best used when the content is explains or expands on the primary narrative. It is most appropriate for sidebars, glossaries, and similar explanatory content.

The article element is best used when the content is independent from the other content of the document or publication. In a scientific journal, for example, each article is independent of the others, even if they have a common theme.

Explanation

Although article-based publications are not common in trade publishing, they are central to areas of publishing like scientific journals. When publications contain articles, it is possible to use the semantically precise article element to tag them.

According to the HTML specification the content of an article element is, in principle, independently distributable or reusable, e.g. in syndication. An article, in this sense, is like its own self-contained mini publication within a larger digital work. Where the section element is used to partition works into smaller sections, an article element represents a discrete container of content that may itself be subdivided using section elements.

The primary difference between article and section tags for users of assistive technologies is in how they are identified. A section is considered a landmark while an article is not. Standalone assistive technologies, like Jaws and NVDA, typically allow users to navigate to articles regardless of this difference, but articles are not included in the list of landmarks for a page.

The article element is also sometimes used to encapsulate scripted content, such as interactive games. It is not limited to the traditional publishing concept of an article but can be thought of as encapsulating any discrete item of content.

Related Links

• MDN — <article>: The Article Contents element
• HTML — The article element
• HTML — Headings and sections