Divs tend to fuck up markup aswell. True, there are some cases when a div is necessary, but truly beautiful markup has no tags related to design, where every tag makes conceptual sense.

Compare:

[code:1]
<div class="menuheading">Menu</div>
<div class="menu">
<div class="menuitem">
<a href="bathroom.htm">Bathroom</a>
</div>
<div class="menuitem">
<a href="kitchen.htm">Kitchen</a>
</div>
<div class="menuitem">
<a href="bedroom.htm">Bedroom</a>
</div>
</div>
[/code:1]

With:

[code:1]
<h1 id="menuheading">Menu</h1>
<ul id="menu">
<li class="menuitem">
<a href="cat.htm">Cat</a>
</li>
<li class="menuitem">
<a href="dog.htm">Dog</a>
</li>
<li class="menuitem">
<a href="platypus.htm">Platypus</a>
</li>
</ul>
[/code:1]

Far too often I see markup similar to the first example. CSS will let you style both markups in exactly the same way, there is nothing you can do with the first example that you can't do with the second example.

So why do we prefer the second example to the first example? Because browsers not supporting CSS would be able to render the lists and headings so that they actually make sense to the reader, instead of confusing blocks of text, all styled the same way.

I built our company website with this in mind (I admit I used two or three divs in places where it was necessary), and one of the advantages is that it will degrade beautifully to mobile devices (as long as they support xhtml, of course), where heavy graphical designs are not as important as quick access to the true content.


Edit: fixed broken markup in the code examples.