What is <aside> tag & why do we need it ?
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.
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 >w3wiki</ 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 >w3wiki</ 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: