HTML <aside> Tag
Definition and Usage
The <aside> tag in HTML is used to define content that is indirectly related to the content surrounding it. It can be placed within various sections of a webpage and typically represents information that is supplementary to the main content. This could include side notes, references, or additional information that enhances the understanding of the main content.
Example: Displaying Content Aside from the Main Content
Here’s an example of how you can use the <aside> tag to display content that is separate from the main content:
<aside>
<p>This is additional information that complements the main content.</p>
</aside>
Styling the <aside> Element with CSS
You can use CSS to style the <aside> element. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 25%;
padding-left: 10px;
margin-left: 10px;
float: left;
font-style: normal;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Exploring the Natural History Museum</h1>
<p>Last weekend, my friends and I explored the Natural History Museum. The exhibits were fascinating, and we learned a lot about our planet's history!</p>
<aside>
<p>The Natural History Museum is renowned for its collections of dinosaur skeletons, minerals, and meteorites. It offers a glimpse into the Earth's past and the evolution of life.</p>
</aside>
<p>We were particularly impressed by the dinosaur exhibit. The life-sized models were breathtaking, and the information provided was both educational and engaging.</p>
<p>The mineral section was equally captivating, with a wide array of colorful gems and rare stones on display. We spent hours exploring and left with a newfound appreciation for our world's natural wonders.</p>
</body>
</html>
Run the code below
This example demonstrates how the <aside> element can be used to provide additional information related to the main content, enhancing the overall understanding of the topic.
Browser Support
Here’s a table showing the browser support for the <aside> element:
| Browser | Version |
|---|---|
| Chrome | 6.0 |
| Firefox | 9.0 |
| Safari | 4.0 |
| Opera | 5.0 |
| Edge | 11.1 |
Global Attributes
The <aside> tag also supports the Global Attributes in HTML, such as class, id, style, title, lang, and data-*.
Event Attributes
The <aside> tag also supports the Event Attributes in HTML, such as onclick, onmouseover, onmouseout, onkeydown, and onload.
Conclusion
The <aside> tag is a versatile and useful element in HTML that allows web developers to include supplementary content that enhances the user experience. By understanding how to use and style this element, you can create more engaging and informative web pages.