Site Administration
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 136: | Line 136: | ||
<h2>Site Administration</h2> | <h2>Site Administration</h2> | ||
</code> | </code> | ||
as the class "title" doesn't enhance the semantics of a H2 heading. | as the class "title" doesn't enhance the semantics of a H2 heading or perhaps to | ||
<code php> | |||
<h2 class="header">Site Administration</h2> | |||
</code> | |||
which would provide the context (Header) for the H2 heading. | |||
== The modified code: "Look Ma, (nearly) no DIVs!" == | == The modified code: "Look Ma, (nearly) no DIVs!" == |
Revision as of 09:47, 6 May 2009
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: Site_Administration_2-0_Open_3.zip.
It should look like this:
The original code
<html>
<head>
<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>
</head>
<body >
Moodle 2.0 - Site Administration (open) - Original Code
</body>
</html>
Discussion: The good, the bad, and the ugly
- No use of lists (semantic HTML)
- No semantic ids
- Repetitive information in "name" and "id" attributes
- Empty (unnecessary) <span> tags
- Inline images instead of list markers or background images via CSS
- Table with inline styles
- 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:
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.
The modified code: "Look Ma, (nearly) no DIVs!"
[TODO]
Here will be demonstrated how the code could be improved without changing it's rendition.
<a href="#sb-1" class="skip-block">Skip Site Administration</a>