Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

User:Frank Ralf/Moodle HTML: Difference between revisions

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>

Line 27: Line 27:
<html>
<html>
<head>
<head>
   <title>Site Adminstration - Open</title>
   <title>Site Administration - Open</title>
   <link rel="stylesheet" type="text/css" href="styles.css"></link>
   <link rel="stylesheet" type="text/css" href="styles.css"></link>
   <link rel="stylesheet" type="text/css" href="styles_002.css"></link>
   <link rel="stylesheet" type="text/css" href="styles_002.css"></link>

Revision as of 14:04, 18 May 2009

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


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

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.

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>

Dissection: 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.
  • ...


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

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

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

[TODO]

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

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