How to create an HTML document which uses aside element ?
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.
The <aside> tag 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.
Syntax:
<aside> <h3>Contents...</h3> <p>Contents...</p> </aside>
Example 1:
HTML
<!DOCTYPE html> < html > < head > < style > h1 { font-size: 40px; color: #090; font-weight: bold; } p { font-size: 20px; margin: 20px 0; } </ style > </ head > < body > < aside > < h1 >w3wiki</ h1 > < p >A computer science portal for Beginner</ p > </ aside > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < 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" > w3wiki </ div > < article > < h1 >Article Title</ 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: