🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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+