The HTML <aside> tag is used to represent a portion of a document that is indirectly related to the main content. It is most commonly used as a sidebar in the document. It does not render anything special in the browser. For example,
<div>
<h1>This is a heading</h1>
<aside>
<p>This is a paragraph</p>
</aside>
</div>
Browser Output
Here, the <aside> element contains a paragraph that is indirectly related to the <h1> element.
CSS with HTML <aside>
We use CSS to style to HTML <aside>. For example,
<aside>
<h2>Sidebar</h2>
<p>This is some content in the sidebar.</p>
</aside>
<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>
<style>
main {
padding: 10px;
margin: 10px;
}
aside {
width: 200px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: left;
}
</style>
Browser Output
