The HTML <aside> tag defines content that is related to the main content but not part of its primary purpose, often used as a sidebar or highlight.
- Contains supplementary information like author details or related links.
- Supports content that enhances or explains the main content.
- Commonly used for sidebars, notes, or highlights.
- Improves semantic structure of a webpage.
Note: The <aside> tag supports global and event attributes in HTML. It was introduced in HTML5 and does not have any default styling in browsers, so CSS is required for its presentation.
<!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>
Syntax
<aside>
<!-- related or supplementary content -->
</aside>
- The <aside> tag defines content that is related to the main content but not essential to it.
- It is commonly used for sidebars, notes, or additional information.
Example: Using the <aside> tag as a 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>