aside is not a sidebar

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?

6 Responses to “aside is not a sidebar”

Rich Clark

Reply

Someone from the W3C commented on our article at HTML5Doctor about aside that ‘aside’ was infact originally ‘sidebar’ and intended for that purpose but the spec obviously isn’t very clear so they should be contacted to clairfy the situation.

stream

Reply

This is my first visit here, but I will be back soon, because I really like the way you are writing, it is so simple and honest

Chris

Reply

So far it just looks like tags or div’s or nav’s are the only option.

When I look at pictures of HTML5, it always has nice placement of horizontal footer bar, top nav bar, side bar, and content in the middle. That’s what I want from HTML5.

But I still don’t know how to do it! I just want to be able to type a basic-looking site into a text editor and have it come out like the standard current thing. If “aside” isn’t the correct answer, what is?

Vipul S. Chawathe

Reply

Aside makes more semantic sense when addressing altogether different aspects with cross-cutting concerns related to the page’s domain.
Let’s take analogy of vehicle- & the performance statistics are mileage, maximum intended load & so forth..now, an aside aspect is the brand ambassador, or the available colors.
Section should be more directive than semantic, such as sitemap marked for human- i. e. grammar intended to be interpreted by human, rather than just bot’s parsing engine for layout rendering as done by CSS or screen reading or SEO.

Leave a Reply

Allowed HTML: tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>