Could we get some examples of simplfying the Elgg DOM? I know pulling out tables makes it cleaner but I'm looking for other examples.

A specific case that I remember is the river. Every item has a lot of unnecesary nested divs (in 1.5, I didn't use the following versions yet, maybe they were fixed). I remove most of them and they kept working fine.

And if I remember right, there are also a lot of unnecesary <p> enclosing some elements like inputs in forms and items in menus.

I will take a look for recovering more cases.

Now this is awesome. Standards compliance will make the platform much more atractive to designers & developers. I will try to help as much as I can!

@Cash Savvy use of CSS can help remove most of the excess divs wrapping the content, thus simplifying the DOM a lot.

@Morgar I really don't see the point in using XHTML Transitional. It's not very difficult to make things validate against the strict dtd, and it helps A LOT with misbehaving browsers (IE 7-)

@Federico: Yes, I agree strict is really not a big deal, I already used it in a couple of sites.

@All, fantastic to see this going on... not sure I understand all of it, but it will I think help make elgg the market leader it could be, and resolve my frustrations with it's clunkyness and complexity in theming and performance fears.  Please keep it up!

I added a "Keep the DOM simple" item. The river is a good example of excessive markup - 6 divs and 1 paragraph tag for a single river entry.

Cool xhtml means that we get width and height for images code in future...   :)

<img src="http://community.elgg.org/mod/profile/icondirect.php?lastcache=1251220846&username=brett.profitt&size=small" border="0"  title="Brett"  /></a>

This is my vanilla install of Elgg 1.7, with the river overwriting the dashboard. This chunk is from the main content:

<div id="two_column_left_sidebar_maincontent_boxes"> 
 
<div id="content_area_user_title"> 
<h2>Welcome John Doe</h2> 
</div> 
<div id="river_container"> 
<div class="contentWrapper"> 
    <div id="elgg_horizontal_tabbed_nav"> 
        <ul> 
            <li class="selected" ><a onclick="javascript:$('#river_container').load('http://localhost/workspace/Elgg/mod/riverdashboard/?type=&content=&callback=true'); return false;" href="?type=&content=">All</a></li> 
            <li  ><a onclick="javascript:$('#river_container').load('http://localhost/workspace/Elgg/mod/riverdashboard/?type=&display=friends&content=&callback=true'); return false;" href="?type=&display=friends&content=">Friends</a></li> 
            <li  ><a onclick="javascript:$('#river_container').load('http://localhost/workspace/Elgg/mod/riverdashboard/?type=&display=mine&content=&callback=true'); return false;" href="?type=&display=mine&content=">Mine</a></li> 
        </ul> 
    </div> 
    
    <div class="riverdashboard_filtermenu"> 
        <select name="content" id="content" onchange="javascript:$('#river_container').load('http://localhost/workspace/Elgg/mod/riverdashboard/?callback=true&display='+$('input#display').val() + '&content=' + $('select#content').val());"> 
            <option value="all" selected="selected">All</option><option value="object,thewire" >The wire</option>        </select> 
        <input type="hidden" name="display" id="display" value="" /> 
        <!-- <input type="submit" value="Filter" /> --> 
    </div> 
<!-- </div> --><div class="river_item_list"> 
    <div class="river_item"> 
        <span class="river_item_useravatar"> 
            <div class="usericon"> 
<div class="avatar_menu_button"><img src="http://localhost/workspace/Elgg/_graphics/spacer.gif" border="0" width="15px" height="15px" /></div> 
 
    <div class="sub_menu"> 
        <a href="http://localhost/workspace/Elgg/pg/profile/jdoe"><h3>John Doe</h3></a> 
                    <p class="user_menu_profile"> 
            <a href="http://localhost/workspace/Elgg/pg/profile/jdoe/editicon/">Edit profile icon</a> 
        </p> 
        <p class="user_menu_friends"> 
        <a href="http://localhost/workspace/Elgg/pg/friends/jdoe/">Friends</a>    
    </p> 
    <p class="user_menu_friends_of"> 
        <a href="http://localhost/workspace/Elgg/pg/friendsof/jdoe/">Friends of</a>    
    </p> 
        </div>    
    <a href="http://localhost/workspace/Elgg/pg/profile/jdoe" class="icon" ><img src="http://localhost/workspace/Elgg/mod/profile/graphics/defaulttiny.gif" border="0"  title="John Doe"  /></a> 
</div> 
 
        </span> 
        <p class="river_item_body"> 
            
<a href="http://localhost/workspace/Elgg/pg/profile/jdoe">John Doe</a> posted a message to the wire<div class="river_content_display">Hello World!</div>            <span class="river_item_time"> 
                (yesterday)
            </span> 
        </p> 
        <div class="clearfloat"></div> 
    </div> 
    </div></div></div> 
</div>

Based on what should be presented, here is my simplification of the DOM (I also have striped much of the JS, as these could more easily be targetted with jQuery selectors, but that's for another discussion.)

<div class="three_col"> <!-- Can we split into 4, standard reusable columns? -->
<h2>Welcome John Doe</h2> 
<div class="contentWrapper">
    <ul id="elgg_tabs"> 
        <li class="selected"><a href="?type=&content=">All</a></li> 
        <li><a href="?type=&display=friends&content=">Friends</a></li> 
        <li><a href="?type=&display=mine&content=">Mine</a></li> 
    </ul>
    <form id="filter_menu"> 
        <select name="content" id="content"> 
            <option value="all" selected="selected">All</option>
            <option value="object,thewire" >The wire</option>
        </select> 
        <input type="hidden" name="display" id="display" value="" /> 
        <input type="submit" value="Filter" /> <!-- uncommentted out for accessibility reasons, could be hidden with JS if not desired -->
    </form> 
    <ul class="item_list river">
        <li>
            <a href="http://localhost/workspace/Elgg/pg/profile/jdoe" class="icon" ><img src="http://localhost/workspace/Elgg/mod/profile/graphics/defaulttiny.gif" title="John Doe" alt="John Doe Profile Icon"  /></a>
                <div class="sub_menu"> 
                  <h3><a href="http://localhost/workspace/Elgg/pg/profile/jdoe">John Doe</a></h3> 
                    <ul>
                        <li><a href="http://localhost/workspace/Elgg/pg/profile/jdoe/editicon/">Edit profile icon</a></li>
                        <li><a href="http://localhost/workspace/Elgg/pg/friends/jdoe/">Friends</a></li>
                        <li><a href="http://localhost/workspace/Elgg/pg/friendsof/jdoe/">Friends of</a></li>
                    </ul>
                </div> 
        <p class="item_body"><a href="http://localhost/workspace/Elgg/pg/profile/jdoe">John Doe</a> posted a message to the wire</p>
        <blockquote>Hello World!</blockquote>            
        <p class="item_time">(yesterday)</p>
    </li>
    </ul> 
</div> 
</div>

@morgar

This code in header produce many errors

	<script type="text/javascript" src="http://community.elgg.org/_css/js.php?lastcache=1264780321&js=initialise_elgg&viewtype=default"></script>

How are you got this working?
Some things can be escaped but I don`t know if this working. 

I see also you use 
/1264553048?
instead
?lastcache=1264780321&

is it the equivalent?

@alfalive not sure what are you talking about. Do you mean that code produces errors running the w3 validator? For passing it, all '&' in urls must be changed to '&amp;'. Validator generates many errors for every '&' ocurrence.

About the lines you mention, no, they are not equivalent, but I guess I didn't change the original one (in 1.5 version). I don't remember, I will check.