Code it correctly: Is “sidebar” really an appropriate id name?

[IanY]

When writing id and class names for HTML elements, we know that names like “float-left”, “right-column”, “top-box”, “red-text”, … etc should not be used because they are against the concept of separating presentation from content and can cause problems in future maintenances.

Now let’s take a look at the id name “sidebar”. Is it a good naming? By naming an element “sidebar”, you actually say that element is a bar-like column which is placed at right or left side. So apparently it is not correspond to the concept of separating presentation from content.

What’s your opinion on the use of “sidebar” as an id name? Do you think it is appropriate?

[joshuanhibbert]

Something more generic, like #secondaryContent, might work well.

[jonedwards]

I reckon it depends on your own semantics…

In WordPress, you can have multiple dynamic “sidebars”, so in that instance, a class .sidebar might be more appropriate for the wrapper.

If you’re using HTML5, one would give the content heirachy by wrapping sections in section tags and secondary content in aside tags, etc, etc, so an ID like secondaryContent might be less appropriate.

Also, an ID secondaryContent doesn’t allow for much re-use. I prefer using separate classes like .secondary and .content. That way, I can target elements like so .content.secondary {} and .content.primary {} – far more flexible.

It’s always going to depend on your workflows and methodologies and how much you want to relate your own semantics to HTML semantics.

[Senff]

I think it’s just as proper/semantic as header and footer. Some content is just so defined, that there is no other way to place it in there. Sure, a menu can appear on the left side instead of the top of the page, but in 99% of all cases, it appears in a block that’s used as a header.

I understand your point, but when the content in a div with id “sidebar” will probably always be used as an actual sidebar, there’s not much wrong with it.

[joshuanhibbert]

@Senff Are you considering a responsive environment too?

@jonedwards In my humble opinion, semantics have nothing to do with class and id names. Name them what makes sense!

[Senff]

@joshuanhibbert That’s a good point — I didn’t initially! Technically, the sidebar might end up at the bottom indeed (on smaller screens), but I still think it’s an appropriate name.

I guess because it will usually appear on the side on “default” screens and not on “alternative” screens (eh, yea, I know, that’s a tricky thing to say nowadays), but also because naming it “not-main-content” makes less sense, so to speak! ;)

I agree with you though, its purpose has not much to do with classnames and ids.

[Paulie_D]

I use the aside element…it seems appropriate http://html5doctor.com/aside-revisited/

[fredthewebchap]

I use aside but usually use a general class like “aside.sidebar” so it’s reusable but depending on the specific needs of each individual aside, I’ll sometimes use an additional class that’s used either for style differences or due to use of functions, jumplinks, etc. (i.e. “aside.sidebar.social”, “aside.sidebar.popularPosts”).

[Paulie_D]

@fredthewebchap Exactly, call it what it is and then add classes to further define it.

[IanY]

Thanks all for your opinions! I personally use an id name similar to @joshuanhibbert’s to indicate that the element is a subordinate content.

And the “responsive environment” is really a good point! We can see many responsive websites whose so called sidebars are no longer sidebars when visitors view them on different devices. So obviously naming an element “sidebar” is… well, sometimes is embarrassing.

[Author]

Posts