HTML aside Tag
Last Updated :
21 Nov, 2024
Improve
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.
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Learning HTML</h2>
<p>
HTML is the standard markup language for creating web pages.
</p>
<aside>
<h3>Did You Know?</h3>
<p>
HTML stands for HyperText Markup Language.
</p>
</aside>
<p>
It is easy to learn and widely used in web development.
</p>
</article>
</body>
</html>
Key Points:
- Placement: The <aside> tag is often placed
- In a sidebar of a webpage.
- Inside an <article> tag for content that provides additional context (e.g., a glossary, quote, or related links).
- Common Use Cases:
- Sidebars with links to related content.
- Advertisements or promotions.
- Brief author bios or quotes.
Aside tag use as sidebar
<!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>
<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>
