HTML Guide for article

The <article> element can be used to define complete, self-contained compositions of a document, for example blog posts. Consider using a heading element (any of <h2> to </h6>) to present each article.

Example:

<h1>Our blog</h1>
<article>
  <h2>How to validate accessibility</h2>
  <p>Use Rocket Validator for a in-depth scan</p>
</article>
<article>
  <h2>How to monitor sites for accessibility</h2>
  <p>Define schedules in Rocket Validator</p>
</article>

Using role="article" on a <section> element is invalid because article is not a permitted value for the role attribute.

The role attribute in HTML is used to define ARIA roles that describe the purpose of an element for assistive technologies. Only specific, predefined ARIA roles are valid per the WAI-ARIA specification. article is not a recognized ARIA role—use document or other appropriate roles instead, or omit the role attribute entirely. The <article> and <section> elements already have implicit roles, so manual role assignment is rarely necessary or useful for these elements.

Valid uses:

• Use <article> without a role attribute for content that is self-contained and intended to be independently distributable or reusable.
• Use <section> for grouping related content and omit the role attribute unless a specific ARIA landmark role is needed (such as region).

Example: use <article> for standalone content

<article>
  <h2>News headline</h2>
  <p>News content goes here.</p>
</article>

Example: use <section> without a role attribute for generic grouping

<section>
  <h2>Introduction</h2>
  <p>Section content.</p>
</section>

The article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website, is implicit when using the <article> tag.

This role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. It can be added to generic elements like <div> to convey this role, for example:

<div role="article">
  <h2>Heading</h2>
  <p>Content...</p>
</div>

Instead of using this role, it’s preferrable to use the native <article> element like this:

<article>
  <h2>Heading</h2>
  <p>Content...</p>
</article>