<article> - HTML Article Tag

Definition

The Article tag specifies self-contained content that should make sense in isolation and which can be distributed separately from the rest of the site.

Usage and Examples

The <article> element can be used in the following ways:

Each <article> should identified, ideally by using a heading element, such as <h1> - <h6>.
<article> elements can be nested, where the inner element is said to be related to the outer. For example, blog comments or user reviews may be individual <article> elements but only in relation to the outer <article> element.
If author information is provided using an <address> element, it only applies to the current <article> element, not child elements. You can specify an article’s publication date using the datetime attribute of the <time> element.

The following example shows a blog post along with structured data:

<article itemscope itemtype="https://schema.org/Article">
 <header>
  <h1 itemprop="headline">How to use article elements</h1>
  <p><time itemprop="datePublished" datetime="2020-10-10">October 10, 2020</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>Article elements can be used for self-contained content...</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

Now let’s look at the same article, but with comments showing:

<article itemscope itemtype="https://schema.org/Article">
 <header>
  <h1 itemprop="headline">How to use article elements</h1>
  <p><time itemprop="datePublished" datetime="2020-10-10">October 10, 2020</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>Article elements can be used for self-contained content...</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="comment1">
   <link itemprop="url" href="#comment1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">Donald Duck</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2020-10-10">October 10, 2020</time></p>
   </footer>
   <p>Great article thanks.</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="comment2">
   <link itemprop="url" href="#comment2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">Michael Ball</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2020-10-10">October 10, 2020</time></p>
   </footer>
   <p>Great semantic markup example. Thanks.</p>
  </article>
 </section>
</article>

Attributes

The Article element only supports the Global Attributes.

Specification

Browser Support

Desktop

Chrome	Edge	Firefox	IE	Opera	Safari
Yes	Yes	Yes	Yes	Yes	Yes

Mobile

Android Webview	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet
Yes	Yes	Yes	Yes	Yes	Yes