Don’t slap a div around a block level container until you HAVE to – for example, you’ll see code like this all the time:
<div id="header">
<h1>Some title</h1>
<div id="nav">
<ul id="navUL">
<li class="navLI">
<a href="#" class="navA">Menu item</a>
</li>
</ul>
</div>
</div>
When on 99% of layouts there is no need for #header, no need for #nav… that’s two excess DOM elements as H1 and UL are perfectly good block level containers all on their own.
It ALSO introduces extra ID’s and classes – if those elements LACKED classes/id’s it’s easier for the browser to go “ok this is empty” instead of “does this match”.
Which is why on the majority of websites there is little reason for that same code to be much more than:
<h1>Some Title</h1>
<ul id="mainMenu">
<li>
<a href="#">Menu Item</a>
</ul>
</ul>
See part of why I call turdpress… well… turdpress given what it typically vomits up for markup – ESPECIALLY in regards to classes. Stacked presentational classes? PLEASE.
There’s this… tendency many developers have to just slap div after div after div in their code… Tables for layout and tables for nothing are similarly afflicted in terms of ‘extra’ elements… You’ll also occasionally see this:
<div id="someData">
<h2>Data Title</h2>
<table id="someDataTable">
<tr>
<td class="empty"> </td>
<td class="colHeading"><strong>Column 1</strong></td>
<td class="colHeading"><strong>Column 2</strong></td>
<td class="colHeading"><strong>Column 2</strong></td>
</tr><tr>
<td class="rowHeading"><strong>Row 1</strong></td>
<td class="rowData">1-1</td>
<td class="rowData">1-2</td>
<td class="rowData">1-3</td>
</tr><tr>
<td class="rowHeading"><strong>Row 2</strong></td>
<td class="rowData">2-1</td>
<td class="rowData">2-2</td>
<td class="rowData">2-3</td>
</tr><tr>
<td class="rowHeading"><strong>Row 3</strong></td>
<td class="rowData">3-1</td>
<td class="rowData">3-2</td>
<td class="rowData">3-3</td>
</tr>
</table>
</div>
The H2 should be a caption, meaning it doesn’t need the div… the first TR should be inside THEAD with TH instead of strong, the empty one doesn’t need   (a textnode in the DOM) if you use empty-cells:show; and could be targeted as the only TD in thead… the td.rowheading should also be TH, removing more unneccesary STRONG tags.
You count that out, it’s 29 DOM elements (not counting textnodes), 16 class instances and two id’s that need to be processed! You’ll see tables like that all the time – and it’s just bloat because people didn’t learn about CAPTION, THEAD, TBODY or TH.
<table id="someData">
<caption>Data Title</caption>
<thead>
<tr>
<td></td>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead><tbody>
<tr>
<th>Row 1</th>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr><tr>
<th>Row 2</th>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr><tr>
<th>Row 3</th>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
The difference? 24 tags, one ID and no classes needed! It’s also less code in the HTML meaning the DOM can be built faster… literally we’re talking 847 bytes vs. 450…
alpha transparent images, very small palette transparent images when tiled both directions, multiple layered CSS3 backgrounds (see that cicada background train wreck – looks great until you try to SCROLL), anything with position:fixed – these can drag some browsers to their knees. Any image that decodes to more than 0.25 megapixels…
or a hybrid of the two (Gecko). How many classes are declared in the document? How many Id’s? How many elements on the page?