<article> tag in HTML5

← Previous Next →

The <article> tag is used to design and show short information about a blog, comment OR news story with image, a heading, time & date, and who is the person write that blog. And the <article> also provide a link to read the complete article.

Important Description

• The <article> tag is an independent piece of content.
• The <article> tag element is content that makes sense on it's own.
• The key point is that the content has to make sense independent of it's context.
• Potential source for the <article> element:
  • Forum Post
  • For Bloging Post
  • News Story
  • Comments, etc.

Example of <article> Tag

<article> <img src="img/java.jpg" class="img-responsive" /> <h4>Java Tutorials</h4> <p>Java is one of the worlds most used programming language...</p> <time>12:00 AM | June 9, 2019</time> </article>

Result Look Like

<article> Tag Example with CSS

You can use the CSS to style article box and content to look better and user-friendly for example - Width, height, font style, color, border, Box-shadow, etc.

<article> <img src="img/sql-database.jpeg" class="img-responsive" /> <h4>SQL Database Tutorials</h4> <p>SQL is a database computer language designed for the retrieval and management of data in a relational database.</p> <time>2:30 PM | August 5, 2018</time> </article>

Result Look Like

<article> Tag Browser Support

Global Attributes

• The <article> tag supports all the Global Attributes in HTML.

Event Attributes

• The <article> tag supports all the Event Attributes in HTML.

← Previous Next →