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.
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!