User:Frank Ralf/Moodle HTML

A after posting "Table Layouts vs. Div Layouts: From Hell to… Hell?" and starting a discussion on "Semantic DIV IDs?" I think it is worth digging deeper into this topic.
talk -- Frank

Read the whole story:

Anatomy of Site Admin Block

This is the original code for the Site Admin block plus some additional HTML to make the code valid and viewable in a browser. (For the time being all examples are only tested using Firefox 3.)

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: Site_Administration_2-0_Open_3.zip.

Screenshot of original block

The Site Admin menu block should look like this:

Original block with CSS turned off

And so the block looks with CSS turned off. Note that the nesting of the menu is gone. And the "Skip" link is visible, and important accessibility feature.

The original code

<html> <head>

 <title>Site Administration - Open</title>
 <link rel="stylesheet" type="text/css" href="styles.css"></link>
 <link rel="stylesheet" type="text/css" href="styles_002.css"></link>

</head>
<body >

Moodle 2.0 - Site Administration (open) - Original Code



</body>
</html>
Discussion: The good, the bad, and the ugly





<a href="#sb-1" class="skip-block">Skip Site Administration</a>








<a href="#" name="d1">
<img id="vh_div1indicator" src="pix/closed.gif" alt="Closed folder"> 

Users</a>



<a class="link" href="admin/settings.php?section=themesettings">
<img src="pix/item.gif" alt="">

Theme settings</a>


Table with inline styles
No use of nested lists (semantic HTML)
No semantic ids
Repetitive information in "name" and "id" attributes ("name" should be replaced by "id" in XHMTL, see http://www.w3schools.com/Xhtml/xhtml_syntax.asp) probably only kept for backward compatability
Empty (unnecessary) <span> tags
Inline images instead of list markers or background images via CSS
No empty (null) ALT attributes for images without meaning
Superfluous class of "link" for <a> tags.
"Skip navigation" link is good practice for accessibility.



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:
Example: Title



  
    Site Administration
  


This could be reduced to 



  Site Administration

 
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 


Site Administration

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


Site Administration

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

Example: Search form
The same goes for the search form in the footer. FORM is also already a block element therefore no additional DIV is needed:
Instead of 



 <form action="http://admin/search.php" method="get">



we could write:

<form class="adminsearchform" action="http://admin/search.php" method="get">


Semantic HTML: "Look Ma, (nearly) no DIVs!"
Some general notes:
We will delete a lot of unnecessary tags, classes, ids, and other attributes. Some of those might be used by some AJAX features. However, for  accessibility reasons the code should work without them. In a later stage we will show how to add those features using JavaScript (see Development:Unobtrusive Javascript).
We will leave the included CSS files untouched. Instead, we will add our CSS directly to the head section of the HTML file. So you can just copy & paste the HTML, save it as a file, and put it in the same folder as the original HTML file. No further downloads needed.



The modified code: Semantic HTML 1.0
Here's the code:

<html>
<head>
<title>Site Adminstration - Open</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="styles_002.css" />
<style type="text/css">
</style>
</head>
<body >

Moodle - Semantic HTML 1.0


</body>
</html>
Screenshots: Semantic HTML 1.0
The block should look like this. Note: We added the red color for the list markers (by the browser) only to distinguish them from the original ones (images).

And so with CSS turned off. Note that the indentation is kept.

What we did:
converted nested DIVs to ULs (LIs)
deleted unnecessary class, id, name attributes
null (= empty) ALT tags for meaningless images
deleted empty SPAN tags
What's left to do:
We haven't changed or added any CSS yet (the red color for the list markers is only for demonstration purposes).
List markers are shown twice, we have to amend that.
The images used as list markers are inserted inline. There are more elegant (and semantic) ways to do so.
The indentation is larger than in the original. That and some other values for margins, padding etc. might need some tweaking to come as close to the original layout as possible.
We left some DIVs which are used for styling by the current CCS.
Here's the current structure of the block:



I noticed a slight inconsistency: Whereas the Footer DIV is nested within the Content DIV, the Header isn't. I haven't checked yet whether that was the case in the original code or introduced by me when juggling with all those DIV tags...

Stay tuned! Continued on Frank Ralf/Semantic HTML2.

Further resources
Sitemap example using lists with no DIVs at all from "Webdesign mit CSS", 2. Auflage, chapter 11
"Table Layouts vs. Div Layouts: From Hell to… Hell?" from Smashing Magazine, quote:
"The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed."
Designing with Web Standards, 2nd ed. by Jeffrey Zeldman is the best resource for creating standard conform, lean HTML.
See also
Semantic HTML in Moodle Docs
CSS FAQ
How to Develop with CSS
Prototyping with XHTML from Boxes and Arrows



<a href="#sb-1" class="skip-block">Skip Site Administration</a>


   Site Administration



<a href="admin/index.php"><img src="pix/item.gif" alt="">Notifications</a>
<a href="admin/register.php"><img src="pix/item.gif" alt="">Registration</a>
<a href="admin/settings.php?section=optionalsubsystems"><img src="pix/item.gif" alt="">Advanced features</a>

<a href="#"><img src="pix/closed.gif" alt="">Users</a>
<a href="#"><img src="pix/closed.gif" alt="">Courses</a>
<a href="#"><img src="pix/closed.gif" alt="">Grades</a>
<a href="#"><img src="pix/closed.gif" alt="">Location</a>
<a href="#"><img src="pix/closed.gif" alt="">Language</a>
<a href="#"><img src="pix/closed.gif" alt="">Plugins</a>
<a href="#"><img src="pix/closed.gif" alt="">Security</a>
<a href="#"><img src="pix/open.gif" alt="">Appearance</a>

  
    <a href="#"><img src="pix/open.gif" alt="">Themes</a>
    
      <a href="admin/settings.php?section=themesettings"><img src="pix/item.gif" alt="">Theme settings</a>
      <a href="theme/index.php"><img src="pix/item.gif" alt="">Theme Selector</a>
    
    

  <a href="admin/settings.php?section=calendar"><img src="pix/item.gif" alt="">Calendar</a>
  <a href="#"><img src="pix/closed.gif" alt=""> HTML editor</a>
  <a href="admin/settings.php?section=htmlsettings"><img src="pix/item.gif" alt="">HTML settings</a>
  <a href="admin/settings.php?section=documentation"><img src="pix/item.gif" alt="">Moodle Docs</a>
  <a href="admin/settings.php?section=mymoodle"><img src="pix/item.gif" alt="">My Moodle</a>
  <a href="admin/settings.php?section=coursemanager"><img src="pix/item.gif" alt="">Course managers</a>
  <a href="admin/settings.php?section=ajax"><img src="pix/item.gif" alt="">AJAX and Javascript</a>
  <a href="tag/manage.php"><img src="pix/item.gif" alt="">Manage tags</a>
  
  

<a href="#"><img src="pix/closed.gif" alt=""> Front Page</a>
<a href="#"><img src="pix/closed.gif" alt=""> Server</a>
<a href="#"><img src="pix/closed.gif" alt=""> Reports</a>
<a href="#"><img src="pix/closed.gif" alt=""> Development</a>



<form class="adminsearchform" 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">

</form>
















   <a href="#sb-1" class="skip-block">Skip Site Administration</a>

    
      Site Administration
      
        
        
        <form class="adminsearchform"></form>

Documentation

User:Frank Ralf/Moodle HTML

Site Administration

Contents

Anatomy of Site Admin Block

Screenshot of original block

Original block with CSS turned off

The original code

Moodle 2.0 - Site Administration (open) - Original Code

Discussion: The good, the bad, and the ugly

Some general rules of thumb

Example: Title

Site Administration

Site Administration

Site Administration

Site Administration

Example: Search form

Semantic HTML: "Look Ma, (nearly) no DIVs!"

Some general notes:

The modified code: Semantic HTML 1.0

Moodle - Semantic HTML 1.0

Screenshots: Semantic HTML 1.0

What we did:

What's left to do:

Further resources

See also

Site Administration

Site Administration