magpiebrain

A Question of Markup (or: A Nasty Case of Divitis)

Now that this site properly validates as XHTML 1.0 Strict (with a little help from some PHP and the W3C validator) 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):

	
<div>
  May 4th in General | Permalink | Comments
</div>

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:

	
<div>
  <div>May 4th</div> in 
  <div>General</div> | 
  <div>Permalink</div> | 
  <div>Comments</div>
</div>

I hope I don’t have to convince you that this is horrible (Zeldman 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:

	
<div>
<ul>
<li><div>May 4th</div></li>
<li><div>General</div> </li>
<li><div>Permalink</div></li>
<li><div>Comments</div></li>
</ul>
</div>

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:

	
<ul>
<li>May 4th</li>
<li>General</li>
<li>Permalink</li>
<li>Comments</li>
</ul>

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…

This entry was posted on Friday, May 7th, 2004 at 9:46 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.