HTML5 | article tag

The <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 represents a component of a page that consists 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:5px;">
        <img src=
              alt="" width="300" height="250"
              class="alignnone size-medium wp-image-560930" />
        <h1> GeeksforGeeks</h1>
        <p>Sandeep Jain(FOUNDER) An IIT Roorkee alumnus and founder
        of GeeksforGeeks. Apart from GeeksforGeeks, he has worked
        with DE Shaw and Co. as a software developer and JIIT Noida 
        as an assistant professor.</p>
    </article>
</body>
  
</html>                    

chevron_right


Output:

Supported Browser: The browser supported by <article> tag are listed below :

  • Google Chrome 6.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Opera 11.1
  • Safari 5.0


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.



Improved By : nidhi_biet