HTML5 <aside> Tag
Last Updated :
30 Jan, 2024
The <aside> tag is used to describe the main object of the web page more shortly like a highlighter. It 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.
Note: The <aside> tag supports Global attributes and Event attributes in HTML. The <aside> tag is new in HTML5. This tag does not render anything special in a browser you have to use CSS for that.
Syntax:
<aside>
<h1>Contents...</h1>
<p>Contents...</p>
</aside>
<aside> vs <div>
Both tags have the same behavior with different meanings.Â
- <div>: It defines or creates a 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.
Example 1: In this example, we will see the implemenagttion of <aside> tag with an example.
HTML
<!DOCTYPE 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 2: In this example, we will see the implemenagttion of <aside> tag with an example by using Style attributes.
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 >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
- Edge 12.0
- Firefox 4.0
- Opera 11.1
- Safari 5.0
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...