HTML Tags
HTML <aside> Tag
The
<aside>tag defines content that is related to the main content but separate from it, like sidebars, pull quotes, or additional information.
It is often used for tangentially related content such as advertisements, links, or notes.
<aside>helps distinguish supplementary content from the main content, improving semantic structure.
Syntax
html
<aside>
<!-- Supplementary content like sidebar, notes, ads -->
</aside>Attributes
| Attribute | Description |
|---|---|
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styling. |
| title | Provides additional information about the element. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aside Tag Example</title>
<style>
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<main>
<h1>Main Content</h1>
<p>This is the primary content of the webpage. It contains the main article or topic.</p>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Additional Resource 1</a></li>
<li><a href="#">Additional Resource 2</a></li>
</ul>
</aside>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <aside> tag.
Notes
<aside>is semantic for tangential or supplementary content.- Often used for sidebars, callouts, or related links.
- Can appear multiple times on a page.
- Helps improve readability, accessibility, and SEO by separating main and related content.
Conclusion
The <aside> tag is ideal for supplementary content that complements the main content.
It provides semantic meaning and a clear distinction between main and secondary information.