XHTML guideline discussion: Part 1

As has been discussed on the community site, Elgg's XHTML, CSS, and UI could definitely be improved. As a starting place, I'd like to start a discussion on a guideline for XHTML. This guideline would be followed by core developers and serve as a good standard for plugin developers. The goal is better markup which makes it easier to do UI/UX work with Elgg.

What rules or recommendations would you like to see in an Elgg XHTML guideline? (Please note, this is for XHTML - not CSS. We'll get to CSS soon enough - edit - probably no way to keep them separate!).


  1. Valid XHTML.
  2. Keep the DOM simple. Don't use several divs when one or two can do. If you do find yourself using a lot of markup, you are probably trying to solve a presentation issue with XHTML markup rather than using CSS.
  3. Use the correct markup for the content. Tables should be used for tabular data not for layouts. Lists for lists (rather than paragraphs). And so on.
  4. Markup should be content driven rather than presentation driven. IDs and Class names should not describe presentation: Bad Example: two_column_left_sidebar.
  5. Avoid inline javascript
  6. Accessible markup
  7. Reusable markup.
    • Prefer classes to ids
    • Use general classes for shared presentation and specific classes/ids for unique presentation. See discussion on the .messages markup below
    • Do not design your markup so that all CSS needs to be on terminal elements - use CSS inheritence

The CSS discussion is here.

  • 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 id="river_container">
    <div class="contentWrapper">
        <div id="elgg_horizontal_tabbed_nav">
                <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>
        <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 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 class="user_menu_friends">
            <a href="http://localhost/workspace/Elgg/pg/friends/jdoe/">Friends</a>   
        <p class="user_menu_friends_of">
            <a href="http://localhost/workspace/Elgg/pg/friendsof/jdoe/">Friends of</a>   
        <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>
            <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">
            <div class="clearfloat"></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>
        <form id="filter_menu">
            <select name="content" id="content">
                <option value="all" selected="selected">All</option>
                <option value="object,thewire" >The wire</option>
            <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 -->
        <ul class="item_list river">
                <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>
                            <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>
            <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>
  • @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

    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.

Feedback and Planning

Feedback and Planning

Discussions about the past, present, and future of Elgg and this community site.