User:Frank Ralf/Moodle HTML

From MoodleDocs

Site Administration

<a class="link" href="admin/index.php"><img src="pix/item.gif" alt="">Notifications</a>
<a class="link" href="admin/register.php"><img src="pix/item.gif" alt="">Registration</a>
<a class="link" href="admin/settings.php?section=optionalsubsystems"><img src="pix/item.gif" alt="">Advanced features</a>
<a href="#" name="d1"><img id="vh_div1indicator" src="pix/closed.gif" alt="Closed folder"> Users</a>
<a href="#" name="d5"><img id="vh_div5indicator" src="pix/closed.gif" alt="Closed folder"> Courses</a>
<a href="#" name="d6"><img id="vh_div6indicator" src="pix/closed.gif" alt="Closed folder"> Grades</a>
<a href="#" name="d8"><img id="vh_div8indicator" src="pix/closed.gif" alt="Closed folder"> Location</a>
<a href="#" name="d9"><img id="vh_div9indicator" src="pix/closed.gif" alt="Closed folder"> Language</a>
<a href="#" name="d10"><img id="vh_div10indicator" src="pix/closed.gif" alt="Closed folder"> Plugins</a>
<a href="#" name="d16"><img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder"> Security</a>
<a href="#" name="d17"><img id="vh_div17indicator" src="pix/open.gif" alt="Opened folder"> Appearance</a>
<a href="#" name="d18"><img id="vh_div18indicator" src="pix/open.gif" alt="Opened folder"> Themes</a>
<a class="link" href="admin/settings.php?section=themesettings"><img src="pix/item.gif" alt="">Theme settings</a>
<a class="link" href="theme/index.php"><img src="pix/item.gif" alt="">Theme Selector</a>
<a class="link" href="admin/settings.php?section=calendar"><img src="pix/item.gif" alt="">Calendar</a>
<a href="#" name="d19"><img id="vh_div19indicator" src="pix/closed.gif" alt="Closed folder"> HTML editor</a>
<a class="link" href="admin/settings.php?section=htmlsettings"><img src="pix/item.gif" alt="">HTML settings</a>
<a class="link" href="admin/settings.php?section=documentation"><img src="pix/item.gif" alt="">Moodle Docs</a>
<a class="link" href="admin/settings.php?section=mymoodle"><img src="pix/item.gif" alt="">My Moodle</a>
<a class="link" href="admin/settings.php?section=coursemanager"><img src="pix/item.gif" alt="">Course managers</a>
<a class="link" href="admin/settings.php?section=ajax"><img src="pix/item.gif" alt="">AJAX and Javascript</a>
<a class="link" href="tag/manage.php"><img src="pix/item.gif" alt="">Manage tags</a>
<a href="#" name="d20"><img id="vh_div20indicator" src="pix/closed.gif" alt="Closed folder"> Front Page</a>
<a href="#" name="d21"><img id="vh_div21indicator" src="pix/closed.gif" alt="Closed folder"> Server</a>
<a href="#" name="d22"><img id="vh_div22indicator" src="pix/closed.gif" alt="Closed folder"> Reports</a>
<a href="#" name="d23"><img id="vh_div23indicator" src="pix/closed.gif" alt="Closed folder"> Development</a>

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:

  1. Site Admin Block: "Look Ma, (nearly) no DIVs!"
  2. Frank Ralf/Semantic HTML2
  3. Frank Ralf/Semantic HTML3
  4. Frank Ralf/Semantic HTML4
  5. Frank Ralf/Semantic HTML5


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:

Site Adminstration-Open.png

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.

Site Adminstration Original without CSS.png

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).

Moodle Semantic-HTML 1.0.png

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

Moodle Semantic-HTML 1.0 without CSS.png

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

"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."

See also

<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>

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

Site Administration