The article element
The article element is a self-contained piece of content within a HTML document. By using the article element you are saying that all of the content within that element is independent from the rest of the page. Examples of standalone content could be a blog post, news article, forum post or a product review. By adding this structure to a HTML document you can help bots like search engines and assistive technologies like screen readers understand where on the page the primary content is.
How to use the article element
The article element has an opening tag (<article>) and a closing tag (</article>) all of the content for that article is contained between the opening and closing tags. Here is an example of it in practice:
<article>
<h1>Title of the article</h1>
<p>Body content</p>
<p>Body content</p>
<author>Author name</author>
</article>With this example we are containing the heading of the article, the content using paragraph tags and the author of the article. We can have multiple articles on the same page, each time we use the article element it will then represent a distinct piece of content.
What to avoid
Although we can have multiple article elements we don’t want to overuse this element. It is best to use it for pieces of content that are fully independent and self-contained from any other content on the page.
The content within the article should also be marked up correctly, defining what is the headers, the body text, author details, quotes etc. Also avoid nesting an article within one another. Each article should not include other articles within it.
Accessibility
As with other HTML elements, the benefit of using the article element over using a div element or nothing at all is that it adds meaning to the content, which can help assistive digital tools like screen readers. A screen reader or another tool will recognise the article element and know that all of the content contained within that element is an independent piece of content.
More HTML tutorials
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects