New in HTML5.

<article> HTML Tag

Element of
HTML Document Structure
What does <article> HTML Tag 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 is a technical writer who specializes in developer documentation and tutorials.

Browser Support for article

Not supported.434513934