Tantek has posted some nice tips on how to improve the quality of your pages and to make them more standards-compliant and in the spirit of the HTML specification. This is a great guide for web designers and developers wondering about how to improve the quality of their code, and what’s the correct way to do something – there are far too many old and outdated HTML design tutorials and sites out there, but Tantek sets the record straight and his post serves as a nice starting point for producing valid code that adheres to standards, and will make maintenance easier.

Why and what’s it for?

A lot of people might wonder what all this talk about “validation” and “standards” is even about. This is a valid question – after all, many people place website design in the same realm as making a powerpoint presentation or even a word document – and there are no standards or validation to worry about for those documents, so why should there be any for webpages?

Well, in this case it’s important to understand the differences. In a certain sense, Word and PowerPoint documents must also “validate”. If you were to open a Word document in Notepad, change a few random characters, it probably would look all messed up when you opened it back up in Word. This is because Word would not be able to parse or “understand” the changed or “invalid” data since it wouldn’t be in a form that it expected.

The same goes for (X)HTML documents, except sometimes it’s not as noticeable. Browsers have been coded, for the most part, to work around invalid markup to some extent, due to years of improperly coded and invalid sites dominating the web. However, as Tantek points out, improperly-formatted documents screw up the DOM (Document Object Model), so when it comes time to add JavaScript to your site, things may start acting weird. It’s best to clean up your act now – if you code by hand, you need to be aware of the rules you need to follow for validation. For other people, unfortunately, there are still many WYSIWYG editors that spew out ugly code. Dreamweaver may be a good choice in this sector.

The official validator does a pretty good job of diagnosing errors and giving warnings, though Tantek’s entry gives a better explanation of some of the more common errors that remain unfixed during the validation process.

Of course, if you’re using a blogging tool like WordPress, much of this work of validation is taken care for you. You just need to be sure that you don’t use invalid markup in your posts – something that may seem annoying to non-techies, but there are times when rules should be followed.

Proper separation of presentation and content

This is perhaps the most preached concept in proper web design, as you can find articles about the subject going back at least a few years. For those used to the “old ways”, this is perhaps the first thing you should know after validation. In fact, you pretty much need to have to the two. It’s entirely possible to have a valid webpage that uses tables for layout/design, but this would violate the proper use of tables. Tables are a semantic element (which means they carry meaning and assign a certain meaning to the information they contain), so using them for layout is an incorrect practice, though it’ll pass the validation test.

This is an important difference to note. Validation tests for document well-formedness, that is, can the data be properly interpreted by a client that only follows the outlined (X)HTML parsing standards. Use of tables for a layout is a design decision that is separate from this; however, the two bad practices of invalid markup and table design often go together. If you’re looking for a good guide to dropping tables, check out Stop Design, and get your site out of the 90’s.

Tantek also gives a nice tip on CSS class names – the use of context. I’ll be the first to admit that I’m probably the worst offender. I use class names like postDate and postMetadataTag when an element with a class of date within an element of class post is the better and more succinct way to do it.

Serving up standards

In short, while following all these guidelines may seem a bit daunting for the new or occassional web designer, it’s worth it to follow these rules as it’ll make your site easier to maintain, and make the XHTML format more viable in the long run. Adhering to an open data standard will make the web easier to use, search and update.