Best Semantic Naming Convention?

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:


<div id="header">

<div id="sidebar">

<div id="content">

<div id="footer">

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!


  • 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.

    Posted by Frans (external link) on Thu 16 Oct 2008 at 5:04

  • 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.

    Posted by Ethan Poole (external link) on Thu 16 Oct 2008 at 10:08

  • 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).

    Posted by Frans (external link) on Thu 16 Oct 2008 at 10:47

  • 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.

    Posted by Ethan Poole (external link) on Thu 16 Oct 2008 at 17:53

  • I don't think multiple is limited at two. razz

    Posted by Frans (external link) on Fri 17 Oct 2008 at 9:12

  • Oh yes, I didn't even think about that. Silly me, lol.

    Posted by Ethan Poole (external link) on Fri 17 Oct 2008 at 18:13