HTML Guide
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>
Related W3C validator issues
The HTML <h1> to <h6> elements represent headings for the different sections of a document, where <h1> is the highest section and <h6> is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1> in this way:
<section class="about">
<article>
<h1>Article heading</h1>
<p>Lorem</p>
</article>
</section>
this will raise a warning as it would be preferrable for example to leave the <h1> for the heading of the <section>, and <h2> for the heading of the article, like this:
<section class="about">
<h1>About heading</h1>
<article>
<h2>Article heading</h2>
<p>Lorem</p>
</article>
</section>
The <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:
<h1>All about guitars</h1>
<section>
<h2>Guitar types</h2>
<p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
<h2>Amplifiers</h2>
<p>Analog, digital, portable...</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>