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:
<!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 >GeeksforGeeks</ h1 >
< p >A computer science portal for geeks</ p >
</ aside >
</ body >
</ html >
|
Output:
Example 2:
<!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" >
GeeksforGeeks
</ 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: