One thing you already probably see, as a web developer, is a visual sidebar wrapped in an
<aside> tag. It works fine in many cases but not always.
<aside> is an HTML5 tag while sidebar is a user interface element that typically appears as a column to the left or right side of the main content. Those secondary contents are often represented as sidebars in printed typography.
HTML5 tag are used regarding the meaning of the content they carry.
Sidebar is just a visual element. It’s done by CSS. Wether or not you’ll use
<aside>depends of the meaning of the content of the tag and not its visual aspect. As Mike Robinson said : “The style of the content should not dictate the use of the element”.
It means an
<aside> doesn’t systematically look like a sidebar.
The aside tag
<aside> carries a “content that is tangentially related to the content around the aside element, and which could be considered separate from that content” (source).
<aside> is used within a
<section> or an
<article> tags, the content should be ’related’ to it :
The aside tag outside a <section> or <article> tag
<aside> is used outside a
<section> or an
<article> tags - directly within
<body> for instance -, it carries a content related to the site such as : tweets from its author, additional navigation, last blog’s posts, last comments, …
The common confusion
The mistake would be to put a primary element, which was visually designed in a sidebar (like a logo, the main nav) in an aside tag.
Considering you need to code a website with a sidebar which includes the main logo, the main nav and some related content (like tweets), you would do it like this :
<aside> is simple to use as long as we keep in mind that it is only an html tag, meaning we use it regarding the meaning of the content it carries, and never regarding the visual aspect of the website - that part must be only done using CSS -.