OKCOOL

I’m a bit funny when it comes to semantic markup. I really don’t like putting visual cues into the markup that I may want to change later. You know those little symbols that we put at the end or beginning of a sentence, that we sometimes no longer use as literary symbols.

As an example, when I’m creating a form it pains me that I have to embed a colon into the markup at the end of the label text. We know why we do this, so that our input box has some kind of “stop” before it, making the view to the user just that little bit cleaner and easier on the eye. Then of course the client asks us if we can change the colon to a hyphen or a comma and we huff and puff because we’ve embedded these visual cues into the mark-up of all of our pages and doing a search and replace on a colon in an entire site can be a bit hit and miss at the best of times.

CSS to the rescue?

Those thoughtful folks from the W3C have given us the lovely pseudo classes of “:before” and “:after” that we can use to append or prepend content before or after an element. But as you may know these really useful tools are not featured in Internet Explorer. So what next?

Let’s try JavaScript?

Nope, I’m a designer, I don’t get it, its ugly, its not accessible, bad for usability and it’ll bloat my page. Hmm OK.

Mythical widget

Let’s pretend for a minute that there’s this mythical widget thingy, that we can put into our mark-up and it’ll do all sorts of clever things in a very easy manner without us having to be a programming whizz and it won’t damage our nice clean mark up. Let’s also assume that our mythical widget thingy looks like this.

It couldn’t really be any simpler and we haven’t even touched our beautiful mark-up.

Of course we want this to be site wide, so we just put this JavaScript into a separate file and include this in every page.

Now every page that has a “dd” element with a label, will get a colon stuck on the end. When our client asks to change this we can just do a very minor edit and the whole site is updated, just like it should.

The downside to this technique is that the user needs to have JavaScript enabled, but that’s a risk that I’m prepared to take as the majority of users do and in this case it degrades quite nicely too.

As you can see the power of jQuery is pretty phenomenal and we haven’t even scratched the surface. For more information on jQuery take a look at the jQuery homepage.

In Part 2 we’ll look at a few more examples based on this technique. How about using an image instead of a colon? Or replacing the actual label text with an image? or…?