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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 03/03/2021
3176 People Used
Only 97 Left
Rating
5.0