❮❮ PREV NEXT ❯❯

HTML - Aside Tag

The aside tag or <aside> tag in HTML is used to define a content that would be placed aside the main contents in a webpage.

Why do we need Aside Tag in HTML?

The aside tag is used to define a content that is not directly linked to the main content in an HTML page. Usually aside tag represents the sidebar in an HTML page.

What does the Aside Tag contain?

The aside tag usually contains the sidebar of the HTML page.

Let us illustrate aside tag with the below example.

Example :

<html>
<body>
	<h1>Explaining aside tag</h1>
	
	<aside>
    	<p>This is inside aside tag</p>
    </aside>	
</body>
</html>

Output :

So if you look at the above code, we have placed the content This is inside aside tag along with the <p> tag.

<aside>
	<p>This is inside aside tag</p>
</aside>

However, we haven't shown, how aside tag can be seen representing the contents of the sidebar.Let us see it below.

Using aside tag representing sidebar in an HTML page

Example :

<html>
<body>	
	<style>
    	article {
        	padding: 20px;
    	}

    	aside {
        	width: 100px;
	    	padding: 10px;
        	float: left;
    	}
	</style>
		
	<aside>
		<h1>Sidebar</h1>
    	<p>Content1</p>
    	<p>Content2</p>    	
    </aside>
    	
	<article>			
		<h1>New Paragraph</h1>
    	<p>This is a new paragraph</p>
    </article>	
</body>
</html>

Output :

So, in the above example we have used the <style> element to place the contents of the aside tag on the left side of the page.

<style>
	article {
		padding: 20px;
	}

	aside {
		width: 100px;
		padding: 10px;
		float: left;
	}
</style>

So, this time the contents of the aside tag represents the sidebar.

<aside>
	<h1>Sidebar</h1>
	<p>Content1</p>
	<p>Content2</p>
</aside>

❮❮ PREV NEXT ❯❯