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?
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.
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 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.
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").
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.
I think an appropriate way to name them is to base the name on the content therein, or its function, rather than where it is located. Of course, this makes 'header' and 'footer' seem incorrect, but 'header' would contain all content you wanted at the top of the page, regardless of the size of screen and 'footer' would to the same for the final content.
I do this so that it is easier to find and edit specific areas when I have a large css file that I haven't edited in a while.
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?
#secondaryContent, might work well.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.
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.
@jonedwards In my humble opinion, semantics have nothing to do with class and id names. Name them what makes sense!
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.
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.
I do this so that it is easier to find and edit specific areas when I have a large css file that I haven't edited in a while.