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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<article>  {
                display:block;
            }

chevron_right


Example :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
       <title>Demo of article</title>
  
</head>
<body>
<article style="width: 300px; border: 2px solid gray; 
padding: 10px; border-radius: 10px; margin:10px;">
/uploads/image-of-a-computer-300x300.png" 
alt="" width="300" height="300" class="
alignnone size-medium wp-image-560930" />
      <h1> Computer</h1>
      <p>
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
  
     </p>
</article>
</body>
</html>

chevron_right


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 :



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.