Div Mania
Gez Lemon explains how to avoid Div Mania – overuse of div elements – with the help of CSS 2.1 selectors.
Like Gez, I’ve seen plenty of sites that just replace the old table-tag-soup with myriads of div and span elements instead of using the semantically correct elements for the task. Not much better than hanging on to the old-school presentational markup.
- Previous post: Safari Wishlist
- Next post: Awarded a Web Standards Awards award
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
One Czech example of the (almost) semantic-only layout from last year: http://klient.plavacek.net/div/
BTW if the IE crap supported siblings or :after/before pseudos, we could drop many neutral blocks, but the reality is different :(
Yes, DIV elements have been overused so much. I've also been trying to make my website DIV free, but due to "certain limitations", I was forced to use them in two occasions.
And that Czech website could be totally DIV free if it used the BODY element as a container. Too bad a lot of people still don't know that the HTML element can also be styled.
Jero: I don't think "div-free" is necessarily an ideal to be aimed for. I've found divs useful to contain related elements on pages, much like the fieldset element does in forms.
It's the only element we have to do that until comes along in XHTML 2.0.
The difference between the FIELDSET and DIV element is that the FIELDSET element has some semantic value and make the form more usable. DIVs do not. It's only used to wrap some content together to style it with CSS. But as Jan said, if IE supported the adjacent sibling selector(s) (and every other CSS2 selectors of course), we would be able to use it to group certain related elements on a page with CSS and style it.
Divlessness is not a virtue.
Misuse of divs (or any other element) is a vice.
That's my take. The discussion is ongoing at juicystudio.
[2] Jero, IE has slight problems when using HTML and BODY elements for styling - both can't have assigned image background at once and body can't have constrained width.
I was thinking the same thing, when I did a view source over at the much hyped Capgemini redesign. My handy DOM Inspector showed DIVs nested 8 deep! Why is DIV/SPAN so much better than TABLE/TD? Yes of course there's the semantic aspect of it, which I agree with completely; but from a code cleanliness and manageability point of view, I see no difference.
You're absolutely right. And Gez Lemon's article is just what beginners need. But as a beginner, I'd just like to say that div-itis might not be so terrible, in the long view. Most people make that mistake when they're transitioning from old markup habits to CSS. We're still thinking in tables. But we're trying. If you're seeing a lot of sites with this, then that could mean there are a lot of us trying.
Michael: Avoiding tables for layout enables screen reader users to listen to a web page without being interrupted by things like "Table with one column and thirty-two rows" and "Table end".
Kathy: Yes, that's probably the case for some sites. But I'm afraid that in many cases it means that the web developer is just using the default templates of whichever CMS the client has decided on. And if they use those templates to learn CSS layout from, they are bound to end up with even more divitis and classitis when building new templates.
I commented about this over at the original juicystudio post. Glad to see some interest in this.
Sorry, comments are closed for this post.