Kay lives here

working with the web

logo210px-W3C_Icon.svg

How good markup makes your life easier

silver leather background

I read a short but bril­liant arti­cle today by Gar­rett Dimon from Dig­i­tal Web Mag­a­zine, called Markup as a Craft. It touches on a topic very dear to my heart: the impor­tant of clean, sim­ple markup as the basis of any web site or application.

In the arti­cle, Gar­rett briefly out­lines 21 sim­ple guide­lines for cre­at­ing markup that is not only clean and sim­ple, not only good, but great. With each guide­line he briefly explains why it’s a good thing, with­out going into a lot of detail. I think some of those guide­lines could do with some more expla­na­tion and cer­tainly exam­ples, but then it wouldn’t be a short article.

If I could blink my eyes, wave a magic wand and give one skill to every web pro­gram­mer in the world, good markup would be it. Some peo­ple might be read­ing this and won­der­ing what I’m going on about. It’s really quite sim­ple: with clean, orderly and seman­tic HTML source, a tal­ented front-end coder can add CSS and DOM script­ing to make the final page look like almost any­thing and behave in almost any way — with­out touch­ing the markup, sim­ply adding the style and behav­iour lay­ers over the top. Given your typ­i­cal web application’s mish-mash of pre­sen­ta­tional and inap­popri­ate ele­ments, how­ever — and I’m talk­ing lay­out tables, inline styles. JavaScript onclicks, pri­mar­ily — the job becomes so much harder. There’s noth­ing I hate more than dig­ging deep through com­plex forms to find out why my global CSS isn’t being applied — only to dis­cover some well-meaning soul has used an inline style to give some­thing a bor­der or some extra mar­gins, or quickly shoved <font color=“red”> around an error mes­sage that the client now wants to be a dif­fer­ent color.

It’s been a week for markup-related things, it seems. I was reminded once more about the <but­ton> ele­ment yes­ter­day by a post on the Web Stan­dards Group mail­ing list. <but­ton> makes a great alter­na­tive to <input type=“submit”> or <input type=“image”> — it behaves in the same way but is much eas­ier to style and can con­tain any inline ele­ment. So you can plug in text, images, or any com­bi­na­tions of inline ele­ments — even Flash movies are pos­si­ble. I gen­er­ally use text with cus­tom back­ground images for good acces­si­bil­ity as well as excel­lent style.

The <but­ton> is not widely used because although part of the HTML 4 spec­i­fi­ca­tion, it was never sup­ported by Netscape 4. If you are lucky enough to no longer worry about that old night­mare, maybe it’s time to take a look at the <but­ton>. Here’s some <but­ton> resources:

Of course, there are things you need to know before you use the ele­ment. Nick reports that IE gets things a lit­tle back­wards when pass­ing the value of the but­ton. But you have a sim­i­lar issue with <input type=“image”> so it’s really just a case of being aware of the problem.

So check out Gar­rett Dimon’s markup guide­lines, and next time you cre­ate a form, try a but­ton instead of an <input type=“submit”>. Maybe 2007 will be the year where web appli­ca­tion markup starts to become beau­ti­ful. Let’s hope so!

2 Comments

  1. “Maybe 2007 will be the year where web appli­ca­tion markup starts to become beautiful”

    And if not 2007 we can all pray for 2008 :)

  2. “If I could blink my eyes, wave a magic wand and give one skill to every web pro­gram­mer in the world, good markup would be it.”

    I’d be happy if I could get most peo­ple to indent/structure their markup properly =)