Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

HTML article Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

HTML article: Main Tips

  • HTML <article> element has independent data, which can be reused or distributed to other web pages or documents.
  • The <article> tags can hold blog entries, news articles, comments, etc.
  • Both HTML <article> tags (opening and closing) are mandatory.

Purpose of article

HTML <article> defines reusable, self-contained information.

Example
<article>
  <h1>Fun Fact</h1>
  <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

Note: in HTML 5, articles element is a new addition.

The HTML <article> vs <section> discussion indicates that these elements are similar, but their use cases differ. For instance, <article> should be applied if specific content will be syndicated.

Tip: syndication refers to a process of making reusable content, which can be incorporated into multiple web sites or documents.

Attributes for article

The HTML <article> can contain any of the global attributes. The following list contains the three most used ones.

address

To provide information about the author of the article, use <address>.

Example
<article>
  <address>
    Written by Someone.<br> 
    Visit me at: <br>
    https://www.bitdegree.org/ <br>
  </address>
</article>

footer

You can use <footer> to provide extra information at the bottom of the <article> element.

Example

<article class="blog_post">
  <p> Another blog post. </p>
  <footer>
    <p>
      Extra information is always good.
    </p>
  </footer>
</article>

time

Use <time> to describe the date and time of the publication of the <article> element.

Example

<article class="blog_post">
  <p>My first blog post, I am a real blogger now.</p>
  <footer>
    <p>
      Posted on <time datetime="2017-07-24 16:00">May 31</time> by Lisa.
    </p>
  </footer>
</article>

Browser support

Browser image
Chrome
5+
Browser image
Edge
All
Browser image
Firefox
4+
Browser image
IE
9+
Browser image
Opera
11.1+
Browser image
Safari
4.1+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
11.1+
Browser image
Safari
4.2+