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 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 5.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 4.0 and above
- Opera 11.1 and above
- Safari 5.0 and above
Please Login to comment...