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> <h3>The content at the right side is inside the aside element!</h3> <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, when I inspected (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> <h3>The example here uses two aside tags. One on the right and the other is on the left!</h3> <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
There’s not much difference between the two elements, <div> and <aside>. You can use both the elements to show contents. However, both the elemnets 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 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>
Now, I don’t have to bother about positioning or styling every <aside> element individually on my web page.
Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes