How to specify the main content of a document in HTML5 ?

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 of the other content of the site (even though it can be related).

In other words, the article element represents the component of a page that consists of self-contained composition in a document, page, or site.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Specify the main content of a 
        document using HTML5
    </title>
</head>
  
<body>
    <h2>GeeksForGeeks</h2>
  
    <h2>
        HTML5: How to specify the 
        main content of a document
    </h2>
  
  
    <article style="width: 300px; 
                    border: 2px solid gray; 
                    padding: 10px; 
                    border-radius: 10px;
                    margin: 5px;">
  
        <img src=
            alt="Geeks" 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:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8" />
  
    <title>
        Specify the main content of 
        a document using HTML5
    </title>
</head>
  
<body>
    <h2>GeeksForGeeks</h2>
    <h2>
        HTML5: How to specify the 
        main content of a document?
    </h2>
  
    <article>
        <h1>search engines</h1>
  
        <p>
            Google, Bing, and Yahoo! are the 
            most used search engines today.
        </p>
  
        <h1>Google</h1>
        <p>
            The world's most popular 
            search engine.
        </p>
  
        <h1>Bing</h1>
        <p>
            Microsoft's entry into the 
            burgeoning search engine 
            market. Better late than 
            never.
        </p>
  
        <h1>Yahoo!</h1>
        <p>
            The 2nd largest search 
            engine on the web
        </p>
    </article>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.