Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best practice for naming DIVs in initial layout

Tags:

Newbie question here. I'm in the beginning stages of laying out a site in HTML/CSS based on a sketch I did. So I'm planning my DIVs on the home page and I'm wondering how to name them and which elements should have their own containers. So far, I have the following :

  • container (contains everything on the page)
  • header (will contain the logo and links, which are sort of connected visually)
  • footer
  • content (this will only contain a widget that plays audio tracks)

Now, I also want, on the right side of my page, in a sidebar of sorts, three other elements:

  • a box containing some headlines/descriptions of an RSS feed from my blog
  • a box containing a few dates of upcoming events
  • a box containing some links to my other sites

I'm looking for opinions as to what is the best (and I guess most "semantic") way of handling the DIVs for those "sidebar" elements. Since my plan is to have those three boxes aligned on top of each other, should I just create one main "sidebar" DIV and then create separate DIVs for each of the elements ("feed-box", "events-box", and "links-box)? Or should there be no "sidebar" DIV (doesn't that imply style/position anyway?), and instead just use the three specific DIVs?

Also, should I give that box that contains the audio widget an id of "content" (even though I know exactly what is going into it) or should it be something like "audio-widget"? (Who knows, maybe a year from now, it will hold some other kind of content instead.)

What do you think is the best practice for this kind of naming? I realize that there is no one correct answer and that it might be pedantic to get too hung up on these names. But the "best" way of handling this is not obvious to me and I would like to be clear from the beginning as to why I'm adopting a given naming convention

Thanks.