Sponsor: The CSS Anthology
The CSS Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Blog Entry
Best Semantic Naming Convention?
Published on the 15th of October 2008
Awhile back there was a great thread on SitePoint Forums about the best semantic naming convention (external link) for a typical layout shell (header, footer, content, navigation, etc.). A lot of people posted what they thought was the best semantic naming scheme, usually along these lines:
XHTML
<div id="header">
...
</div>
<div id="sidebar">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
Largely, this is the same semantic naming convention that I would use: header, footer, content, etc. All of these names describe the relation between the various elements of the layout shell. However, I usually try to have the content section above the sidebars for accessibility purposes. Also, many people had an overall wrapper element with the site's name as the ID, but I would recommend to use the <body> element for this.
Surprisingly, a lot of people argued for containers and wrappers (elements used solely to make styling and positioning easier), which are certainly not semantic. However, I guess sometimes you have to sacrifice perfect for near-perfect. Even at Lowter, we use an element called positioning simply for positioning, but this helps to provide a resizable layout that works across browsers. I'd like to remove it from the markup, but it might require having fixed column widths or something else as the cost. Sometimes, with the lack of web standards support in many browsers (mainly IE), it is necessary to sacrifice semantics simply for a better user experience.
With three column layouts, I still cannot really decide on the optimal semantic naming convention. Many people on SitePoint suggested secondary-content and tertiary-content for each sidebar, but this seems to demean one sidebar as more important than the other, which is not always the case. I should also note that sidebar in itself is semantic and the actual definition does not denote that it must be on the "side" of anything as it's name would initially suggest. The best solution I can come up with is simply sidebar_1 and sidebar_2, which just seems ugly. Honestly, the most semantic solution is probably assigning both sidebars a class of sidebar, but this would be unpractical for styling purposes. At Lowter we just use left and right, which of course is not semantic, but simply provide better descriptions than secondary-content and tertiary-content would. This is something that I would like to change in the future, as I am always working to improve the markup on Lowter to make it more semantic whenever possible.
If you would like to share what semantic naming convention you use or your opinion on semantic naming for multiple sub-content column layouts, please feel free to comment below!
Comments
-
Frans (external link) (16 Oct 2008 5:04)
I'm pretty sure that you can do things with a useless DIV element that's a direct child of the BODY element in Internet Explorer that you cannot do with the BODY element in regard to positioning in particular.
-
Ethan Poole (external link) (16 Oct 2008 10:08)
Yes, IE limits what you can do with the <body> element, but I think what you would use a container element for generally can be accomplished using the <body> element. This is at least my experience.
-
Frans (external link) (16 Oct 2008 10:47)
I wouldn't use it for anything but positioning and perhaps some play with multiple backgrounds (the latter would of course apply to all browsers).
-
Ethan Poole (external link) (16 Oct 2008 17:53)
Can't you do multiple backgrounds with the <html> and <body> elements? I've never tried this myself, but it seems like it should be possible, at least in Opera and FF.
-
Frans (external link) (17 Oct 2008 9:12)
I don't think multiple is limited at two. :P
-
Ethan Poole (external link) (17 Oct 2008 18:13)
Oh yes, I didn't even think about that. Silly me, lol.
Sponsor: Songbird Media Player
Desktop web player, a digital jukebox, and web browser mash-up. (external link)
