What is <aside> tag & why do we need it ?

Last Updated : 30 Jan, 2022

In this article, we will discuss about <aside> tag in HTML.

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.

HTML <aside> Tag vs HTML <div> Tag: Both tags have the same behavior with a 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 documents. It let us easily recognize the main text and subordinate text. 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. The developer needs to use CSS for that.

Syntax:

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

Example 1: The following example demonstrates the HTML <aside> tag.

HTML

<!DOCTYPE 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 2: The following uses style in HTML <aside> tag.

HTML

<!DOCTYPE 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> 