I read a short but brilliant article today by Garrett Dimon from Digital Web Magazine, called Markup as a Craft. It touches on a topic very dear to my heart: the important of clean, simple markup as the basis of any web site or application.

In the article, Garrett briefly outlines 21 simple guidelines for creating markup that is not only clean and simple, not only good, but great. With each guideline he briefly explains why it’s a good thing, without going into a lot of detail. I think some of those guidelines could do with some more explanation and certainly examples, 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 programmer in the world, good markup would be it. Some people might be reading this and wondering what I’m going on about. It’s really quite simple: with clean, orderly and semantic HTML source, a talented front-end coder can add CSS and DOM scripting to make the final page look like almost anything and behave in almost any way – without touching the markup, simply adding the style and behaviour layers over the top. Given your typical web application’s mish-mash of presentational and inappopriate elements, however – and I’m talking layout tables, inline styles. JavaScript onclicks, primarily – the job becomes so much harder. There’s nothing I hate more than digging deep through complex forms to find out why my global CSS isn’t being applied – only to discover some well-meaning soul has used an inline style to give something a border or some extra margins, or quickly shoved <font color=”red”> around an error message that the client now wants to be a different color.

It’s been a week for markup-related things, it seems. I was reminded once more about the <button> element yesterday by a post on the Web Standards Group mailing list. <button> makes a great alternative to <input type=”submit”> or <input type=”image”> – it behaves in the same way but is much easier to style and can contain any inline element. So you can plug in text, images, or any combinations of inline elements – even Flash movies are possible. I generally use text with custom background images for good accessibility as well as excellent style.

The <button> is not widely used because although part of the HTML 4 specification, it was never supported by Netscape 4. If you are lucky enough to no longer worry about that old nightmare, maybe it’s time to take a look at the <button>. Here’s some <button> resources:

• <button>: the forgotten element
  A presentation by Nick Cowie to the Perth Web Standards Group in March 2005. An audio recording, full transcription and presentation slides are available.
• Styling form buttons – Tyssen Design
• Push my button – Digital Web Magazine

Of course, there are things you need to know before you use the element. Nick reports that IE gets things a little backwards when passing the value of the button. But you have a similar issue with <input type=”image”> so it’s really just a case of being aware of the problem.

So check out Garrett Dimon’s markup guidelines, and next time you create a form, try a button instead of an <input type=”submit”>. Maybe 2007 will be the year where web application markup starts to become beautiful. Let’s hope so!