Aside vs Sidebar : Some newbies in web design may confuse the difference of aside and sidebar. According to the HTML5 semantic structural elements example figure, <aside> element is being shown as at the right side of document, so many beginner level in HTML think that the right side of the document displayed with <aside> element is sidebar.
It is completely different. Here are the definition of aside and sidebar.
Sidebar
Sidebar is a column of display that shows in right or left side of a HTML document to show primary information, navigation, ads and various type of information. So we can say sidebar is just a style of a HTML webpage.
Aside
Aside is HTML5 semantic element that is used to show indirect information in the main content. So <aside> can be exist in main content or sidebar. Check the following example.
<article>
<h2> How To Cook Rice </h2>
<p>Today we will show you how to cook rice</p>
<!-- aside inside article -->
<aside>
<p> <a href="#">How To Pet A Cat </a> </p>
</aside>
<p> Rinse the rice with water first and you should know the rice type. Rice texture can be different based on what types of rice you buy. </p>
</article>When you run the above example code, the result will shown as below.
You will see the link ‘ How To Pet A Cat ‘ in the ‘How To Cook Rice’ content. This is the purpose of <aside> element. ‘How To Pet A Cat’ is not directly related to ‘How To Cook Rice’ content. So when you try to add indirectly content in the main content of a document, you can use <aside> element.
Aside element can be exist in everywhere : in-content position of main content and sidebar.
Conclusion
Now you know the correct usage and meaning of Aside and sidebar. Sidebar is just a style and it is not HTML element. Aside is to display indirect information in the main content and can be exist in everywhere including main content ( blogpost, article) and sidebar. The final word is ” Aside is not Sidebar”.
