Best ways to reduce number of DOM elements

Question

Everyone agrees that less DOM elements means better page performance. It means better javascript performance, especially in older browsers.

But where are the best places to look to reduce DOM elements? What are the common culprits that you guys have come across that are easy fixes to get that number down?

Answer 1

use:

<ul id="navigation-main">
    etc..
</ul>

in stead of:

<div id="navigation-main">
    <ul>
        etc..
    </ul>
</div>

... when possible, that is. Sometimes you need the additional div for layout purposes. But when not necessary, don't use it.

Answer 2

Anywhere where you are using an element to affect layout is usually something you can think about. Often times you can actually use less elements combined with CSS to achieve the same result. Hard rules are difficult as it depends a lot on the specific case.