User:Frank Ralf/Semantic HTML4

Read the whole story:

Site Admin Block: "Look Ma, (nearly) no DIVs!" Frank Ralf/Moodle HTML
Site Admin Block: Better image placement Frank Ralf/Semantic HTML2
Course Categories - The Ugly Duckling Frank Ralf/Semantic HTML3
Course Categories - Clearing the Tables User:Frank Ralf/Semantic HTML4

Course Categories: Clearing the Tables

Just for comparison reasons the original again:

Lists from scratch

This time we go for the radical approach and create the list structure from scratch, thereby deleting most of the existing classes and ids.

The code:

(Only the relevant part shown.)

Course categories



<a href="/course/category.php?id=2">Moodle Features</a>2

<a href="/course/category.php?id=3">Quizzes</a>1


<a href="/course/category.php?id=1">Miscellaneous</a>4

Screenshot

That's the way it looks (compare this with the original above):

The font sizes got lost because we deleted the class attributes.
The nested list provides for the indentation.
There's a superfluous bullet point.
The underlining is lost.
The numbers which aligned on the right side in the original now sit flush against the category links.

Getting back to normal

Let's try re-creating the look of the original. At first we get rid of the list marker, increase the font-size of the list items and make it bold:

<style type="text/css"> </style>

That will look like this:

Documentation