HTML / HTML Tags

HTML <Article> Tag

Oct 12, 2022
2 min read
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

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes