`HTML Article Element: Learn When (And Where) To Use It Now`

In HTML Tags, New

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of: HTML Document Structure Before And After HTML5 – Here’s What Changed
What does HTML Article Element: Learn When (And Where) To Use It Now do?: The <article> element identifies a self-contained piece of content which could theoretically be distributed to other websites and platforms as a stand-alone unit. The <article> element is a good choice to contain entire blog posts, news articles, and similar content.
Display: block
Usage: semantic | structural

Independent Unit of Content

The <article> tag is one of the new semantic elements introduced with HTML5. According to the HTML5 specification:

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.

This is most often used in two contexts:

On a page with a single piece of content, a single <article> element can be used to contain the main content and set it off from the rest of the page.
On a page with multiple pieces of content (a blog index page, a search results page, a category page, a news feed), multiple <article> elements can be used to contain each individual piece of content.

Either way, this is functionally similar to using <div> elements, and the display and styling work the same. However, using the <article> element instead of <div> provides more semantic information to screen readers, search engines, and third-party applications.

Example Code


<!-- Blog Index Page - Multiple Article Elements -->  <body>   <header>     <h1>Title of Site</h1>   </header>   <main>     <article>       <header>         <h2>Title of Blog Post</h2>       </header>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <a href="">Read More.</a></p>     </article>     <article>       <header>         <h2>Title of Blog Post</h2>       </header>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <a href="">Read More.</a></p>     </article>     <article>       <header>         <h2>Title of Blog Post</h2>       </header>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <a href="">Read More.</a></p>     </article>   </main> </body>  <!-- Single-Article Page -->  <body>   <header>     <h2><a href="/">Title of Site</a></h2> <!-- Some people omit the <h2> tags. -->   </header>   <main>     <article>       <header>         <h1>Title of Page or Blog Post</h1>         <!-- Post data such as author, publication time, and tags may go here. -->       </header>       <!-- The article content. -->     </article>   </main> </body>

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for article


Not supported.	43	45	13	9	34