HTML <aside> Tag

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