HTML5 | article tag

<article> tag is one of the new sectioning element in HTML5.

The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content of the site (even though it can be related).

In other words, The article element represent of component of a page that consist of self-contained composition in a document, page or a site. For Ex. in syndication.
Potential source for Article Element are :

  • A magazine/newspaper article
  • A blog entry
  • A forum post
  • A user submitted comment

This tag is most often used in two contexts:

  • On a page with a single piece of content, a single <article> element can be used to contain the main content and set it off from the rest of the page.
  • On a page with multiple pieces of content (a blog index page, a search results page, a category page, a news feed), multiple <article> elements can be used to contain each individual piece of content.

Either way it is similar to <div> element, and display the stylish work same. However, using the <article> element instead of <div> provides more semantic information to screen readers, search engines, and third-party applications

Default CSS setting : Most browsers will display the Article element with following values.

<article>  {


Example :

<!DOCTYPE html>
       <title>Demo of article</title>
<article style="width: 300px; border: 2px solid gray; 
padding: 10px; border-radius: 10px; margin:10px;">
alt="" width="300" height="300" class="
alignnone size-medium wp-image-560930" />
      <h1> Computer</h1>
computer is a device, which can be instructed to carry out
any set of arbitrary arithmetic or 
logical operation automatically.
The ability of computer to follow a 
sequence of operation, is known as program

Example: This is the image of a blog and Here, the red circle contain an article, it has its own image which make it separate from the other content of the site.
Example :

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter