magpiebrain

Sam Newman's site, a Consultant at ThoughtWorks

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…

Advertisements

2 Responses to “A Question of Markup (or: A Nasty Case of Divitis)”

  1. Cheah Chu Yeow

    Nice one Sam. Glad to see you getting more of your butt onto the Web Standards bandwagon ;). It’s a very very encouraging growth (as I see it) and I’m beginning to enjoy your blog more and more, not just because of that, but also more importantly because your posts are becoming more interesting than ever.

    Keep it up!

    Reply
  2. Sam Newman

    Thanks Chu 🙂 You realise that now you’ve gone and said that the standard of posts may well take a nose dive…

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

%d bloggers like this: