HTML article Tag

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.

<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.

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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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>.

<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.

<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.

<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

Chrome

5+

Edge

All

Firefox

4+

IE

9+

Opera

11.1+

Safari

4.1+

Mobile browser support

Chrome

All

Firefox

4+

Opera

11.1+

Safari

4.2+