DIVs with IDs or Classes from SEO standpoint

[G00gleFan]

Hi all,

I am currently working on a simple 3-col CSS layout:

body {
padding: 0;
margin: 0 auto;
width: 780px;
}
#wrap {
}
#header {
}
#lnav {
float: left;
width: 160px
}
#rnav {
float: right;
width: 160px;
}
#content {
margin-left: 160px;
margin-right: 160px;
}
#footer {
clear: both;
}

I used #wrap to wrap all other divs (left & right navs, header, footer and content). I was wondering is there any impact from a SEO standpoint, on using IDs for a DIV, as opposed to using classes. For example, for each of the navigation panels (lnav, rnav) I intend of having smaller div boxes with links to subsections of the website. Each of those smaller divs is a category of things i.e. div1 may hold recipes, div2 may hold ingredients and so on. All of those divs are visually identical; would it be better to use an #id for each, instead of just using a class to style it? Does that CSS layout I am working on is seriouly flawed in terms of SEO (I read posts about having 'content' first)

Regards

[Don_Hoagie]

I think everyone here will tell you that, even though none of us can claim intimate knowledge of SE algorithms, they most certainly cannot be at all related to ID's and Classes. You should be good to go.

The notion of putting "content first" is actually not a universal thing... as always, it depends on the site. For SEO purposes, when possible you should put your SEO-friendliest content first... that is sometimes content, sometimes nav... depends. But that theory isn't a construct of CSS layouts, it's what you should always do when you layout a site; it's just that absolute positioning with CSS is really the only practical way to get it done.

Your layout, if it remains simple, will do fine. The saved markup and download time you get out of replacing html table structures will already put you ahead of the game.

hth

[G00gleFan]

Thanks ever so much Don. That really gives me the answers I was looking for when I started this thread. I spend hours and hours trying to find a suitable 3-col layout that suited the content of my website. I came around 20 different layouts each of them having advantages and disadvantages. At the end of the day, I am just starting with CSS having moved from tables for layout (I ll never go back) and all I was looking for is a simple layout, easy to maintain and as much as browser independent as possible. Each layout I have seeing has a seperate 'hack' for each browser and that really puts me off. Because there will always be inconsistencies between IE, FF, Opera, NN (even between their own different versions). I have tested the layout (above code) with the latest of all of those browsers and it seems quite robust (probably because it doesn't use too many CSS methods properties that could be seen differently across browsers!). I will probably go for that then. The only thing I am thinking it to re-arrange my navigation divs so that I put the SEO-friendliest content first (without of course breaking the logical order of the information).

Thanks again.

[doodlebee]

Each layout I have seeing has a seperate 'hack' for each browser and that really puts me off. Because there will always be inconsistencies between IE, FF, Opera, NN (even between their own different versions).

Don't use hacks. Avoid them as much as you possibly can. If you're seeing major differences between Opera, Mozilla, Netscape, Safai and the like, it's *because* you're using hacks. And the only reason you're using hacks is because IE displays things differently.

The problem with hacks is (check out dithered.com to see the chart) *many* browsers will see the same hack, and changes themselves as you suggest by the hack. Maybe you want to hack something for IE5, but you notice that if you use that praticular hack, Opera will pick up the message you're sending to IE, and mess up your layout in Opera. So you end up searching for a hack that is IE-only, or for a hack that will counter-hack the effect in Opera.

This is an utter and complete waste of your time. Netscape, Konqueror, Safari, Mozilla, Opera...these are examples of browsers that are standards-compliant. You want to design your sites in these browsers. *THEN* you want to go see what it looks like in IE when you're done.

*Then* you need to use a conditional comment to make some adjustments for the screwed-up way IE displays things. Viola. You're CSS cosing like made easier and simpler.

Trust me - I went through years of hacks before someone shoved my face into the conditional comments toilet and flushed. Just designing for a standards-compatible browser, and then using a conditional comment for IE (AFTER your design is complete in other browsers), you will cut your time and headaches down to almost nothing. You *may* have to use a hack once in a blue moon for minor adjustments, but it will be nowhere near the headache you're having now with resorting to hacks.

[G00gleFan]

I couldn't agree more with you there Don.

This issue is a real nightmare if you get carried away using hacks for this and that. Personally I am not an MS-hater but I seriously dislike the philosophy behind IE so far. I haven't had a chance to download the IE7b2 so that I can see *if* that philosophy has changed towards better by following some standards and rendering the latest CSS versions properly. I am not (and probably never will) using any hack and that code I mentioned above displays identical across FF, NN, Opera and IE6. Only difference I found was the body width; IE's max was 780px, while FF could tolerate a couple pixels more without displaying the vertical scrollbar.

I don't know how it would display in IE4 or 5, but to be perfectly honest I don't care; people are responsible for updating their Internet browsers from time to time as it is not possible nor practical for web developers to keep backward compatible with versions appeared a decade ago! In that respect, if my CSS fails in IE4, I guess I could live with it. From the stats gathered from my previous website, I found that over 80% of my visitors their used IE6, a ~15% used FF and Opera and the remaining 5% was IE5.x and others.

I am currently gathering people's opinions @'Search Engine Promotion' forum about positioning H1s-HXs in terms of SEO. Its a nightmare to get all things right but I guess it is those little differences gathered up together to make something 'good' or 'brilliant'.

Thank you very much for your help, I got the answers I was looking for in terms of browser compatibility.

Regards.