Skip to content
Related Articles

Related Articles

Improve Article

HTML5 <aside> Tag

  • Difficulty Level : Basic
  • Last Updated : 03 Mar, 2021

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 defines or creates division or section in the web page.
  • <aside>: It does the same job by creating a section or division but it contains only the content that is related to the main web page.

The <aside> tag makes it easy to design the page and it enhances the 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. This tag does not render as anything special in a browser you have to use CSS for that.

Syntax:



<aside>
  <h1>Contents...</h1>
  <p>Contents...</p>
</aside>

Example: HTML aside Tag

HTML




<html>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML aside Tag</h2>
    <h1>This is normal heading Tag</h1>
  
    <p>This is normal paragraph text</p>
  
    <aside>
      <h1>This is heading text in aside Tag</h1>
  
      <p>This is paragraph text in aside Tag</p>
    </aside>
</body>
</html>

Output: 
 

Example: Using Style in HTML aside Tag:

HTML




<html>
<head>
  <style>
    article {
      width: 50%;
      padding: 10px;
      float: left;
    }
    aside {
      width: 40%;
      float: right;
      background-color: green;
      color: white;
      padding: 5px;
      margin: 10px;
      height: 100px;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <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>

Output:

Supported Browser : 

  • 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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :