magpiebrain

Now that this site properly “validates (W3C Markup Validatior – validation results)”:http://validator.w3.org/check?verbose=1&uri=http%3A//www.magpiebrain.com/ as XHTML 1.0 Strict (with a little help from some PHP and the “W3C validator”:http://validator.w3.org/) I’m now starting to look at the markup itself. As you may know, the idea is that the XHTML should contain the semantic markup, and the CSS the presentation, which is a pattern I have used here. I have become concerned however about the quality of my markup. Lets look at a simple example. Currently, the links for each post are marked up like this (I’ve omitted @href@’s or the MT tags that generates this content):

  May 4th in General | Permalink | Comments

Here, I have a list of options for each post. I am however displaying it as a simple piece of text – the fact it is laid out like it is is purely down to how the XHTML has been written. In addition I have no control over specific elements within the @div@ – what if I decided to add an icon for the comments link for example? I could fix this like so:

  
May 4th
 in
  
General
 |
  
Permalink
 |
  
Comments

I hope I don’t have to convince you that this is horrible (“Zeldman”:http://www.amazon.com/exec/obidos/tg/detail/-/0735712018/qid=1083919435/sr=8-1/ref=pd_ka_1/103-0251942-9751812?v=glance&s=books&n=507846 calls it divitis with good reason). Whilst I can now address each element with the controls the markup is ugly and I still have layout specific code – the @|@ used to separate the controls for example. Lets address that issue first – we have a list of controls, so lets treat it as a list:

May 4th
General
 
Permalink
Comments

Now I can style this as an inline list and remove the bullet using something like this CSS:

.entrycontrols ul {
  display: inline;
  list-style-type: none;
}

However I still have a nasty case of divitis. This code can be simplified by moving the class uses to the enclosing HTML elements. While we’re at it, I’ll get rid of the ‘entry’ preceeding each class name for the @li@’s – these classes are already being used in the context of the @entrycontrols@ class:

May 4th
General
Permalink
Comments

Which is much nicer I think. Comparing this final markup with the initial snippet we see that:

* The markup is cleaner
* It has more semantic meaning (we are now talking about a list of things)
* We have more control over the way the controls are used

Now to root out divitis in the rest of the site…