User:Frank Ralf/Moodle HTML

< User:Frank Ralf
Revision as of 09:47, 6 May 2009 by Frank Ralf (talk | contribs) (Some general rules of thumb)

Jump to: navigation, search

Anatomy of Site Admin Block

This is the original code for the Site Admin block plus some additional HTML to make the code valid an viewable in a browser.

This is a static HTML snapshot, created by using the browser's "Save page as..." function. The code, including the necessary CSS and image files, is available here:

It should look like this:

Site Adminstration-Open.png.

The original code

  <title>Site Adminstration - Open</title>
  <link rel="stylesheet" type="text/css" href="styles.css"></link>
  <link rel="stylesheet" type="text/css" href="styles_002.css"></link>
<body >
  <h1>Moodle 2.0 - Site Administration (open) - Original Code</h1>
<!-- Begin of original Moodle code -->
<td style="width: 210px;" id="left-column">
<a href="#sb-1" class="skip-block">Skip Site Administration</a>
<div id="inst2" class="block_admin_tree sideblock">
 <div class="header">
  <div class="title">
    <h2>Site Administration</h2>
<div class="content">
<div class="admintree">
<div class="depth0"><a class="link" href="admin/index.php"><img src="pix/item.gif" alt="">Notifications</a></div>
<div class="depth0"><a class="link" href="admin/register.php"><img src="pix/item.gif" alt="">Registration</a></div>
<div class="depth0"><a class="link" href="admin/settings.php?section=optionalsubsystems"><img src="pix/item.gif" alt="">Advanced features</a></div>
<div class="depth0"><a href="#" name="d1"><img id="vh_div1indicator" src="pix/closed.gif" alt="Closed folder"> Users</a></div><span id="vh_div1"></span>
<div class="depth0"><a href="#" name="d5"><img id="vh_div5indicator" src="pix/closed.gif" alt="Closed folder"> Courses</a></div><span id="vh_div5"></span>
<div class="depth0"><a href="#" name="d6"><img id="vh_div6indicator" src="pix/closed.gif" alt="Closed folder"> Grades</a></div><span id="vh_div6"></span>
<div class="depth0"><a href="#" name="d8"><img id="vh_div8indicator" src="pix/closed.gif" alt="Closed folder"> Location</a></div><span id="vh_div8"></span>
<div class="depth0"><a href="#" name="d9"><img id="vh_div9indicator" src="pix/closed.gif" alt="Closed folder"> Language</a></div><span id="vh_div9"></span>
<div class="depth0"><a href="#" name="d10"><img id="vh_div10indicator" src="pix/closed.gif" alt="Closed folder"> Plugins</a></div><span id="vh_div10"></span>
<div class="depth0"><a href="#" name="d16"><img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder"> Security</a></div><span id="vh_div16"></span>
<div class="depth0"><a href="#" name="d17"><img id="vh_div17indicator" src="pix/open.gif" alt="Opened folder"> Appearance</a></div><div id="vh_div17">
<div class="depth1"><a href="#" name="d18"><img id="vh_div18indicator" src="pix/open.gif" alt="Opened folder"> Themes</a></div><div id="vh_div18">
<div class="depth2"><a class="link" href="admin/settings.php?section=themesettings"><img src="pix/item.gif" alt="">Theme settings</a></div>
<div class="depth2"><a class="link" href="theme/index.php"><img src="pix/item.gif" alt="">Theme Selector</a></div></div>
<div class="depth1"><a class="link" href="admin/settings.php?section=calendar"><img src="pix/item.gif" alt="">Calendar</a></div>
<div class="depth1"><a href="#" name="d19"><img id="vh_div19indicator" src="pix/closed.gif" alt="Closed folder"> HTML editor</a></div><span id="vh_div19"></span>
<div class="depth1"><a class="link" href="admin/settings.php?section=htmlsettings"><img src="pix/item.gif" alt="">HTML settings</a></div>
<div class="depth1"><a class="link" href="admin/settings.php?section=documentation"><img src="pix/item.gif" alt="">Moodle Docs</a></div>
<div class="depth1"><a class="link" href="admin/settings.php?section=mymoodle"><img src="pix/item.gif" alt="">My Moodle</a></div>
<div class="depth1"><a class="link" href="admin/settings.php?section=coursemanager"><img src="pix/item.gif" alt="">Course managers</a></div>
<div class="depth1"><a class="link" href="admin/settings.php?section=ajax"><img src="pix/item.gif" alt="">AJAX and Javascript</a></div>
<div class="depth1"><a class="link" href="tag/manage.php"><img src="pix/item.gif" alt="">Manage tags</a></div></div>
<div class="depth0"><a href="#" name="d20"><img id="vh_div20indicator" src="pix/closed.gif" alt="Closed folder"> Front Page</a></div><span id="vh_div20"></span>
<div class="depth0"><a href="#" name="d21"><img id="vh_div21indicator" src="pix/closed.gif" alt="Closed folder"> Server</a></div><span id="vh_div21"></span>
<div class="depth0"><a href="#" name="d22"><img id="vh_div22indicator" src="pix/closed.gif" alt="Closed folder"> Reports</a></div><span id="vh_div22"></span>
<div class="depth0"><a href="#" name="d23"><img id="vh_div23indicator" src="pix/closed.gif" alt="Closed folder"> Development</a>
<div class="footer">
  <div class="adminsearchform">
    <form action="http://admin/search.php" method="get">
        <label for="query" class="accesshide">Search in settings</label>
        <input name="query" id="query" size="8" value="" type="text">
        <input value="Search" type="submit">
<span id="sb-1" class="skip-block-to"></span>
<!-- End of original Moodle code -->

Discussion: The good, the bad, and the ugly

  1. No use of lists (semantic HTML)
  2. No semantic ids
  3. Repetitive information in "name" and "id" attributes
  4. Empty (unnecessary) <span> tags
  5. Inline images instead of list markers or background images via CSS
  6. Table with inline styles
  7. Superfluous class of "link" for <a> tags.
  8. ...

Some general rules of thumb

  • DIV and SPAN are generic (block and inline) elements with no semantic meaning.
  • As such they should be used as sparsely as possible.
  • There's no need to wrap single elements in DIV or SPAN tags:
<div class="header">
  <div class="title">
   <h2>Site Administration</h2>

This could be reduced to

<div class="header">
  <h2 class="title">Site Administration</h2>

with attaching the class directly to the H2 tag (which already is a block element).

And as long as the Header DIV only contains one element this could very well be stripped down to

<h2>Site Administration</h2>

as the class "title" doesn't enhance the semantics of a H2 heading or perhaps to

<h2 class="header">Site Administration</h2>

which would provide the context (Header) for the H2 heading.

The modified code: "Look Ma, (nearly) no DIVs!"


Here will be demonstrated how the code could be improved without changing it's rendition.