html5 aside
Together with the new header and footer and article and section elements there is one more important addition to the html5 spec which is bound to improve the structure of our future html documents. The aside element caused some controversy when it was first introduced but now the spec seems to be nearing its final stage. Time to find out how the aside element can help us bring more structure to our content.
why the fuzz?
When the aside element was first introduced it raised discussions left and right. While the need for capturing "sidebar"/related-like content was clear, the exact implementation clearly wasn't.
One issue raised lived purely on a semantic level. The word "aside" is easily linked to visual positioning. It's not quite as bad as "sidebar" but it still seems to suggest the content is positioned next to the main content. After fighting for years against style-based classnames front-end developers weren't too happy to see this trend resurface in an official w3c spec.
But there were more glaring issues to tackle. It turned out the original definition of the aside element didn't even qualify as a container for typical sidebar content. It was only meant to hold content directly related to a main block of content. Usual sidebars often include contextual information related to the side as a whole, not necessarily to the content on the current page (just think latest news block on a calendar detail page or see the contact block to the right on this very page).
And so the first definition didn't actually cater to the needs and wants of the front-end developer community, making the new element only marginally interesting and possibly creating a lot of confusion along the way. Luckily the powers that be were listening and decided to make some changes to the aside element, greatly increasing the sex-appeal of this new html5 elements once again.
the current aside spec
The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.
This latest definition opens up many more possibilities but at first glance we might be losing a little specificity compared to the original definition. Upon closer inspection though, there's an elegant solution to giving extra meaning to the aside element based on it's context in the document, so no need to worry (just yet).
simple sidebar content
In most cases the aside element will behave as a simple container for sidebar content. Note that this still doesn't mean the aside element should be visibly "next to" another element, it simply means the content is tangentially related to the site or page. How tangentially related is still up to you to decide though, so there's still a gray area there.
related content
Once you nest the aside element inside an article element though, it transforms a little and it will function as actual contextually related content (fe. related links or related downloads). The content captured by the aside element should be specifically related to the other content inside the article and not only to the site as a whole.
This is a pretty elegant and structurally sound solution to easily differentiate between these two levels of contextual content. An interesting take on typical html semantics that might warrant some further investigation in the future.
so everyone is happy?
Well, almost everyone. Looking at this very page you'll notice that the sidebar content includes actual related article content (the affiliate ads, the article info) but also typical sidebar content (the contact, archive and related section articles blocks). So if I wanted to follow the current spec, the first few sections should be contained by the article, the other sections should structurally be outside the article. Sadly css isn't quite ready for that yet so I'll need to find a way around that. It's more of a design issue though and nothing a better spec could solve (unless you would link content through specific attributes, but that's taking it a little too far).
conclusion
The new aside element is a gallant way to mark up related content. Whether it is directly related or just marginally is dependent on its context, so use it wisely and carefully.
Figuring out what content is related and how related it actually is will probably take some experimenting though. Hopefully we'll stay clear from previous errors (remember when everything was a list) and I'm still in doubt whether the comments on an article belong in a section, article or aside. Like most best practices though, time and testing will help in providing all the answers.