HTML5 | <aside> Tag

The <aside> tag is used to describe the main object of the web page in a shorter way like a highlighter. It basically identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author information, links, related content and so on.

<aside> Vs <div>: Both tags have same behavior with different meaning.

  • <div>: It define or create division or section in the web page.
  • <aside>: It does the same job by creating section or division but it conntains only the content that is related to the main web page.

The <aside> tag makes easy to design the page and it enhances clarity of html document. It let us easily recognize the main text and subordinate text. In both the time <div> and <aside> need CSS to specific design. The <aside> tag supports Global attributes and Event attributes in HTML.



Note: The <aside> tag is new in HTML5.

Syntax:

<aside>
  <h3>Contents...</h3>
  <p>Contents...</p>
</aside>

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>aside tag</title>
        <style>
        .gfg {
            font-size:30px;
        }
            h1 {
                font-size:40px;
                color:#090;
                font-weight:bold;
            }
            p {
                font-size:20px;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">Aside Tag Example</div>
        <aside>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p
        </aside>
    </body>
</html>                    

chevron_right


Output:
aside tag
Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>aside tag</title>
        <style>
            .gfg {
                font-size:40px;
                color:#090;
                font-weight:bold;
                text-align:center;
                margin-bottom:20px;
            }
            article {
                width: 50%;
                float: left;
                padding:10px;
                float:left;
            }
            aside {
                float:right;
                width: 40%;
                float: right;
                background-color: green;
                color: white;
                padding:5px; 
                margin:10px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <article>
            <h1>Heading . . .</h1>
            <p>Aside tag is use to display important information
             about the primary page.</p>
        </article>
        <aside>
            <h1>Aside tag example</h1>
            <p>Aside tag content. . .</p
        </aside>
    </body>
</html>                    

chevron_right


Output:

Browser Supports: The browser supported by <aside> tag are listed below :

  • Google chrome 6.0 and above
  • Internet Explorer 9.0 and above
  • Firefox 4.0 and above
  • Opera 11.1 and above
  • Safari 5.0 and above


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.



Improved By : nidhi_biet



Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.