Last updated: 04/01/2024
The HTML5 <aside> tag shows contents separately next to the main content, such as a paragraph, at either the right side or the left side. The contents inside <aside>, usually has contents that are related to the main content. You can actually add a few extra lines to explain briefly, what’s inside the main content.For example,
HTML-5 (Hypertext Markup Language, version 5), is a language used to design website and applications. It is the fifth version of HTML, which came with many new features and elements for better graphics, page structure etc.
The content at the right side in the above example, is inside the <aside> element.
<html>
<head>
<title>HTML5 aside Tag Example</title>
</head>
<body>
<h2>The content at the right side is inside the aside element!</h2>
<article>
<aside style="float:right;width:30%;
border-top:solid 5px #555;background-color:#f6f6f6;margin:0 0 0 10px;padding:0 10px;">
<p>The new vesion has many new features.</p>
</aside>
<p style="width:70%;margin:0;padding:5px;">
HTML-5 (Hypertext Markup Language, version 5), is a language used to design website and applications.
It is the fifth version of HTML, which came with many new features and elements
for better graphics, page structure etc.
</p>
</article>
</body>
</html>Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes
While reading an article on a website recently, I came across a section on the page, which had highlighted details from a portion of the paragraph. At first, I thought it might be a <div> element positioned separately from the main paragraph. However, after further inspection (out of curiosity) I found an element, I honestly was not aware. It was an HTML5 <aside> tag.
I have started using this tag on my blog posts and it really looks nice. I can now add a few extra lines and place it a little aside from the main paragraph.
More than just the looks, it adds meaning to the page. When used inside an <article> tag, the contents inside the "<aside>" tag is directly related to the article’s content. However, you can use the <aside> element for secondary content (a separate content). For example,
<html>
<head>
<title>Using HTML5 aside tag for Secondary Content</title>
</head>
<body>
<!--The example here uses two aside tags. One on the right and the other is on the left-->
<article>
<aside style="float: right; width: 20%;font: 15px Calibri;margin: 0 10px;">
The example here focuses mainly on how to extract the values from the Range slider (the element)
</aside>
<p>
I am not using any code behind procedure or an API for data submission;
the example here focuses mainly on how to extract the values from the Range slider (the element),
show the values in a label and update the browser URL with the values, using only JavaScript.
</p>
</article>
<aside style="float: left; width: 50%; font: 20px Calibri;font-weight: bold;">
Using aside for secondary content!
</aside>
</body>
</html>Difference between <aside> and <div> element
You can use both <div> and <aside> to show contents. However, both have different meanings.
The <div> or division shows a section of a web page. Every division can have different contents or details.
The <aside> shows contents that are related to the contents of another element or the main web page.
Styling aside Element with CSS
You can style the <aside> element using in-line styling (see the above example) or using CSS. For example,
<style>
aside {
float: right;
margin: 10px;
width: 30%;
clear: both;
}
</style>Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes