An aside really isn’t a sidebar

Asides are short, tangential comments related to the containing article. Sidebars are blocks of non–vital content that may or may not be related to the main article on a page.

One of HTML5′s structural tags is aside. I must admit to liking this one as soon as I found out about it; it seemed to promise a way of adding a little writerliness to blog posts, even a little depth. On a practical level, it could help authors supply supplementary or tangential information within their documents. One of the best uses of asides (not the actual tag itself) can be found on Jon Tan’s site:

An aside from Jon Tan's website. It provides brief, supplementary information to an article

A brief aside from Jon Tan's website

At least that’s what I thought an aside was. And the dictionary agrees with me:

a temporary departure from a main theme or topic, esp. a parenthetical comment or remark; short digression Dictionary.com

However. Here’s the HTML5 spec:

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 be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document. HTML5 specification

The problem here is that the spec stretches the natural interpretation of what an aside is, i.e. a short, temporary digression. Blogrolls and other side content on a blog are not short or temporary, or even necessarily tangentially related to the main content.

An aside is a conversational digression, and belongs solely within an article or section tag, not independent of it. Without a surrounding article or section there’s nothing to digress from.

A sidebar could easily be represented by an, erm, sidebar tag. If we allow equally presentational tags such as header and footer, then it makes no sense to disallow sidebar. All of these tags serve a semantic function, even if their names are rooted in their appearance on the page (especially when they’re so prevalent on web pages). A sidebar simply serves as a container for content outside of the main article.

A Guardian story about Tony Blair with a sidebar containing a related account of a parliamentary session

One use of a sidebar in The Guardian. Note that the sidebar could contain content unrelated to the main story, such as adverts or a table of contents

For me this represents a problem with HTML5. The meaning of most HTML 4 tags is not really open to interpretation, so it’s pretty easy to start marking up documents with just a list of tags. When a tag’s purpose is not self-evident (from its natural language meaning), or the reasoning behind the naming and usage of tags is inconsistent, then this will cause problems.

Filed under: Articles

Tags: , , ,

Next post:

← Previous post:

Comments

  1. David Oliver says:

    Yes, “aside” isn’t really the best name for the tag. As HTML5 is a language which is supposed to be about adding semantic value you would have thought they’d have ensured their tag names don’t conflict with the current English dictionary.

    My favourite thing about HTML5 is that you can write XHTML style (self-closing tags) markup, making switching between HTML5 and XHTML5 very easy. I’m currently building my first HTML5 site, and have spent a few days reading up on the spec and its changes. Overall I think it’s nice and an improvement.

  2. Leon says:

    Yes, I’m liking it too (this site is HTML5). The flexibility and simplicity — starting from the doctype — is really refreshing.

    I also like the open development, even if it can make things seem chaotic; there’s a spec, of course, and there’s a lot of discussion around the spec (HTML5 Doctor, for example). It’s obviously still being developed, so there are bound to be changes (there actually was a sidebar tag a while back, and aside‘s purpose has been extended). I guess the more examples of how we map common HTML4 pages to HTML5 (or XHTML to HTML5) we see, the more we’ll agree on actual usage.

  3. Ricardo Verhaeg says:

    Agreed, hopefully a better tag (maybe even the back of ‘sidebar’) will come with better semantics. Or yet we are the ones confusing and using an aside as sidebar.
    Your example show the diference between aside and sidebar, and if W3C sees this, maybe we could see a change sooner then expected.

    I just think that HTML5 lacks a little on Context. Many tags have their semantics, in a global way all makes senses. But somecodes become odd because they lack context between the tag and its parents.

  4. Leon says:

    Thanks for your comment, Ricardo.

    Yes, the return of sidebar would be good. I use aside for the sidebar on this site as that’s what the spec says I should do, and we have to follow the spec whether we agree with it or not.

    The more you use HTML5 the more it makes sense. Using div for articles, headers, sections and sidebars now seems plain odd. The thing to remember, I think, is that every element can have its own internal structure (so articles can have headers and footers, for example, but not bodies — but that’s a different matter), and that each new element starts a new heading hierarchy. Which means lots of h1s.

  1. [...] An Aside isn’t really a side­bar auf eleonpaternoster.com [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>