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 dones the same job by creating section or division but it conntains only the content that is related to the main web page.
The <aside> tags 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:
< 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 > |
Output:
< 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" >GeeksgorGeeks</ 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 > |
Output:
Browser Supports: The browsers which support aside tag are:
- Google chrome 6.0 and above
- Internet Explorer 9.0 and above
- Mozilla 4.0 and above
- Safari 5.0 and above
- Opera 11.1 and above
This article is attributed to GeeksforGeeks.org
leave a comment
0 Comments