Something that I’ve seen in some of the sites that are starting to work with HTML5 is the use of the aside element as a sidebar. Maybe this comes from the misinterpretation of the current definition?

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can also be used for typographical effects like pull quotes.

The definition uses the word “sidebar”, but I think that the meaning is something closer to the “pull quotes” part than to what we know as a website’s sidebar. From what I understand about that definition, I would use it to wrap some content that is related to the current article or section, but with information that’s not essential to understand it, like complementary information, trivia, etc.

This is the example from the definition. The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe:

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

But I haven’t seen a clear definition to know for sure what would be the ideal element for a standard sidebar. If a sidebar is just navigation, it could be wrapped in a nav element. Maybe it could even be a footer.

Since not everything is related to the main content and not everything is navigation, I thought that the best fit for this site (the one you’re in right now) would be a separate section element, but I’m not completely sure that there’s not a better alternative.

What do you think would be the best element for a sidebar in HTML 5?