Get your DOCTYPE right

I look at dozens of sites every week and one of the first things I do is check the code to see how they’ve been constructed and, amongst other things, whether the code is valid or not. What I see time and again is designers who don’t understand DOCTYPES and cause themselves and their clients problems. A lot of this stems from the defaults used in Dreamweaver and designers over-relying on it to do things for them.

Earlier versions used an HTML version 4 DOCTYPE but crucially ommitted the address, meaning that the pages were in quirks mode on most browsers. That meant lots of cross browser incompatibilities and problems rendering modern CSS properly. It was a well-known problem amongst the better web design forums and newsgroups but many never seen to have picked up on it. It’s easy enough to set up the various correct types as snippets, and it’s even quite easy to change the default in one of the internal template files.

Recent versions of Dreamweaver use an XHTML DOCTYPE by default and amongst the more stringent requirements of this is that you must close any tag that doesn’t naturally have a closing tag. This includes meta tags and image tags and you must add a trailing / before the closing > in order to be writing valid code. A good designer really should be aware of this but unfortunately a great many aren’t and this results in a lot of sites with a lot of validation errors. Some search engines are more forgiving of validation errors than others but why make it harder for them? All my experience says that cleaning up the code helps rankings; and of course valid code is the only real foundation for maintaining cross-browser compatibility and future-proofing your site.

Incidentally, Dreamweaver is a good product and certainly the best of the visually capable web editors, but like any program it has to be used with knowledge and understanding of the language it’s creating. It generally produces decent code but if you push it in the wrong directions or use it inappropriately then it can produce rubbish just like any other program.

Learn about the different DOCTYPES and the reason for using them at the Web Design Group site, and the W3C Recommended list of DTDs, and make your web designs a lot more professional and your sites a lot more search engine friendly.

Comments

Get your DOCTYPE right — 1 Comment

  1. Pingback: Old code, No DOCTYPE found! - WebProWorld