Renegade — Sun, 16 Sep 2007 20:46:55 +0000

Great article there Megan. I must admit, I do suffer from DIV-itis sometimes although I am trying to cut down on it.

Just a question though, in the last bullet point:

Quote:
Reconsider your design choices. This is a tough one but it's worth thinking about. Some design effects, such as scale-able rounded corners, are impossible to do without some extra divs and spans. It is worth creating a long-term maintenance mess to get those rounded corners?

Was it meant to be "Is it worth creating..." as opposed to "It is worth creating..."?

Welcome back Suzanne! So nice to see you round again

Megan — Sun, 16 Sep 2007 13:15:54 +0000

webwiz;224193 wrote: I'm not sure I completely agree with that. A DIV is semantically neutral, as is a SPAN. What's more, you could arguably make the HTML more semantic by adding meaningful class names, as for microformats.

A div does have semantic meaning - as I explained, it's a division, a section, a bunch of stuff that goes together. What I was saying is that over-using them when you don't need to often removes the semantic meaning. Then you are just using it as a empty tag. A div does not have meaning when it's not being used for it's right purpose: to define a section. Microformats would be different because in those cases you are defining a meaningful section.

To me, a tag being "neutral" is basically the same as it not having meaning at all. If it doesn't have meaning then it doesn't have meaning.

Quote:

In CSS, I can target IE using this as a selector, e.g.

#for-msie #nav a {zoom: 1;}

Similarly, I can detect IE in JavaScript:

var isIE = !!document.getElementByTagName('for-msie');

So, you're using conditional comments to put in a div tag but you're not using them to serve a different CSS file? I know some people do things like that because they don't like to have CSS in two different places. But I haven't seen it done this way before - people are more likely to use traditional CSS hacks in that case. I'm starting to think about just serving an ie-only CSS file as part of my template. Right now I'm just putting it into the as needed.

webwiz — Sun, 16 Sep 2007 01:36:51 +0000

Nice article, Megan. Thanks.

Quote: The structure is no longer purely semantic. Additional divs, that are not serving any logical purpose, have been applied.

I'm not sure I completely agree with that. A DIV is semantically neutral, as is a SPAN. What's more, you could arguably make the HTML more semantic by adding meaningful class names, as for microformats.

That does not invalidate your arguments, though.

Sadly, IE sometimes does require an extra DIV for the layout to work. I use this to advantage, sometimes, by putting a conditional comment around the opening and closing DIV tags, like this:

In CSS, I can target IE using this as a selector, e.g.

#for-msie #nav a {zoom: 1;}

Similarly, I can detect IE in JavaScript:

var isIE = !!document.getElementByTagName('for-msie');

Abhishek Reddy — Sat, 15 Sep 2007 17:05:13 +0000

Great article. Even though I'm cautious about general tag noise, I think I suffer from div-itis sometimes when I use div tags for rapidly prototyping layouts, and neglect to reduce it later. Navigation lists is a classic example. You've encouraged me to fix the problem on at least one layout already.

Nice to see Suzanne again, too!

JeevesBond — Sat, 15 Sep 2007 05:53:26 +0000

Hi Suzanne, good to see you again!

Having looked at the code of our own articles site (apaddedcell - where that was published) it does indeed suffer from div-itis! I should investigate completely re-writing the templates for that site, but it wont be until after we've moved the forums.

Suzanne — Sat, 15 Sep 2007 03:35:38 +0000

I was just going over this with my dad (who is moving into using Dreamweaver from GoLive).

I do like to use DIVs for sections that aren't necessarily delineated by headings. Great summary!