User:Frank Ralf/Moodle HTML

Jump to: navigation, search

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.
Any comments welcome! -- Frank

Read the whole story:

  1. Site Admin Block: "Look Ma, (nearly) no DIVs!"
  2. Site Admin Block: Better image placement
  3. Course Categories - The Ugly Duckling
  4. Course Categories - Clearing the Tables
  5. formslib - Checkboxes: A Case of "Divitis"?


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

 Site Administration - Open

Moodle 2.0 - Site Administration (open) - Original Code

Discussion: The good, the bad, and the ugly

Skip Site Administration

  • 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

 

we could write:

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:

Site Adminstration - Open

Moodle - Semantic HTML 1.0

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

Skip Site Administration

   Skip Site Administration

Site Administration