HTML <aside> Tag
The <aside> tag in HTML is used to define content that is indirectly related to the main content on the webpage. It usually contains additional information that can be helpful for the user but is not directly related to the main content. The aside content can be used to contain sidebars, callouts, or any other content that can be used to enhance the user's experience.
Syntax
1<aside> 2 <!-- additional content goes here --> 3</aside>
The <aside> tag is an HTML5 element and is a block-level element that can contain any other HTML elements.
Examples
Here are some examples of using the <aside> tag in HTML:
Example 1: Using <aside> for sidebars
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Using aside for sidebars</title> 5 </head> 6 <body> 7 <header> 8 <h1>My Blog</h1> 9 </header> 10 <main> 11 <article> 12 <h2>My First Blog Post</h2> 13 <p>This is a paragraph</p> 14 </article> 15 </main> 16 <aside> 17 <h2>About the heading</h2> 18 <p>This is a paragraph</p> 19 </aside> 20 <footer> 21 <p>Copyright © 1990 My Blog</p> 22 </footer> 23 </body> 24</html>
In this example, we use the <aside> tag to contain the author's bio, which is indirectly related to the main content of the webpage, which is the blog post. The <aside> tag is placed after the <main> tag and before the <footer> tag.
Example 2: Using <aside> for callouts
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Using aside for callouts</title> 5 </head> 6 <body> 7 <header> 8 <h1>My Website</h1> 9 </header> 10 <main> 11 <article> 12 <h2>Welcome to my website</h2> 13 <p>This is a paragraph</p> 14 <aside> 15 <p>Don't forget to sign up for our newsletter!</p> 16 </aside> 17 </article> 18 </main> 19 <footer> 20 <p>Copyright © 2000 My Website</p> 21 </footer> 22 </body> 23</html>
In this example, we use the <aside> tag to contain a callout that is indirectly related to the main content of the webpage, which is the welcome message. The <aside> tag is placed inside the <article> tag to show that it is related to the article content.