The <aside>
tag in HTML is used to define content that is tangentially related to the content around it. It typically represents content that is considered separate from the main content and can be thought of as a sidebar, a pull quote, or additional information related to the main content. The content inside the <aside>
tag should be related but not crucial to the understanding of the main content.
Syntax
<aside>
<!-- Content Goes Here -->
</aside>
Example 1: Basic usage of <aside>
Tag
<!DOCTYPE html> <html lang="en"> <head> <title>HTML aside Tag</title> </head> <body> <article> <h1>Main Content</h1> <p>This is the main content of the article.</p> </article> <aside> <h2>Related Information</h2> <p>Additional information related to the main content.</p> </aside> </body> </html>
Output: In this example, the <aside>
tag is used to contain related information alongside the main content of an article.
Example 2: Using <aside>
for a Sidebar
<!DOCTYPE html> <html lang="en"> <head> <title>HTML aside Tag</title> <style> body { display: flex; } article { flex: 1; padding: 20px; } aside { width: 300px; background-color: #f0f0f0; padding: 20px; } </style> </head> <body> <article> <h1>Main Content</h1> <p>This is the main content of the article.</p> </article> <aside> <h2>Sidebar Content</h2> <p>Additional information in a sidebar.</p> </aside> </body> </html>
Output: Here, the <aside>
tag is used to create a sidebar with additional information alongside the main content.
Browsers Compatibility
Chrome | Edge | Firefox | Opera | Safari |
---|---|---|---|---|
5 | 12 | 5 | 11.1 | 5 |