/ Sidebar Semantic Shenanigans

The ever-present sidebar. It’s a staple of the ‘net. You see it everywhere. It’s an accepted design convention allowing visitors to quickly recognize it among millions of sites as a place to find all kinds of auxiliary information.

Now we’re all aware of the importance of keeping our classes clean, meaning that they shouldn’t contain presentational information like “leftbox” or “greentext”, but what about something a little less obvious like “sidebar?” I’ve—slowly—come to realize that the ubiquitous sidebar’s name is presentational. I mean the word “side” can mean only one of two things: left, or right. Just because it doesn’t say “left” or “right” doesn’t mean the word “side” isn’t implying one of them.

Semantically speaking however, what’s being presented in the “sidebar” has nothing to do with the word “side”, but is most often auxiliary information that is usually—but not always—related to the main content block. Hence my decision to name the sidebar on my site “aux-content.” This way, it’s fully autonomous in terms of its ID (I don’t believe in using class names for unique items in a page) and isn’t bound to be a sidebar for the rest of its life.

Now if your sidebar only contained the most recent posts for example, or your blogroll and nothing else, then you could easily name its ID “recent-posts” or “blogroll.” But it should never be named “sidebar.” I mean, what if you wanted to turn it into a footer one day, or a part of the header, or something else?

Go semantic, it’s your safest bet.


Read more from the archive.