DOCTYPEs And Validation

August 24, 2009

When developing a website it is crucial to do so in the cleanest, most standards’ compliant way. After spending sleepless nights getting your website to render properly on IE6 (which I hope will be dieing soon), the next major task on the list is to validate your CSS, as well as the markup. In most cases, having a clean, organized code that is valid goes hand-in-hand with proper browser rendering. However, before we go further, we need to know what exactly are the different DOCTYPEs, and which one we should be using.

DOCTYPE is short for Document Type Declaration and it is the very first element that appears in any web page (preceding the <HTML> tag), and it basically indicates to the browser how to look at your code. If you do not declare a DOCTYPE at the start of your document, browsers become confused and act differently. Therefore, regardless of how professional you want to go around doing this, a DOCTYPE is absolutely vital. You can read more about why you should use a DOCTYPE at the A List Apart website.

Having said that, you know need to make the decision of which of the various types are you going to stick to. The most important types are for HTML and XHTML, and on three levels: Frameset, Transitional and Strict. This is how the line of code looks like:

Now you need to make the choice. If you are looking to become a professional web designer, then your goal is to stick to the XHTML 1.0 Strict DOCTYPE and produce valid CSS and code. This means your code is strictly organized and the syntax is perfect. However, this might be extremely difficult to reach at your first attempt. For that reason, you may want to use the Transitional, which is the same, but far looser and will let many little “errors” slip without making a big fuss about them. In all cases, you should not use the Frameset DOCTYPEs because we have successfully embarked the 21st century, and frames are a thing of the past.

You might want to start out with the XHTML Strict DOCTYPE and see how the validation goes. If your website is online, you can use the W3C Validation Service as you work to follow the errors that come up. If it’s not online, and you are developing from your local machine (via MAMP, for example, which I had talked about), you can use the Web Developer Firefox add-on (one of several that you should be using as a web designer) and click on Tools > Validate HTML. If you are getting 500 errors, that it might be too little too late. However, if you have 200, for example, you can work to fix them all. If that’s way too much work that you don’t think is worth the time, then you can go Transitional, and the error count should be significantly reduced, to eventually give you valid Transitional code.

Why Should I Validate My Code?

In theory, a proper DOCTYPE with validated CSS and XHTML will render properly across all browsers. However, since there are “browsers” such as Internet Explorer 6, a perfectly valid code could still lead to a perfectly disfunctional website. However, it will most probably render as you would want it to on the remaining browsers in the market. Over time, the issue with validation has moved from being essential for cross-browser compatibility, to being a prestigious title that is well worth striving for.

Therefore, as a professional web designer, you should put every effort into producing validated code to ensure that it is:

Future-proof: Any new browsers will properly render it

Cross-browser compatible: Will require less work to show up perfectly on all of the current browsers

Professional: Having the “valid CSS” and “valid XHTML” on your website are indications of the value of your work – something to be proud of

The good news is that the huge majority of frameworks and scripts that are used as the base of any website (I had previously talked about the 960 Grid System, as well as Blueprint as CSS frameworks) are developed with valid code to allow the most uptight of designers and developers to rely on them. So if you start developing your website by declaring the XHTML 1.0 Strict DOCTYPE, using the 960 GS, on your Mac using MAMP, you can use the Web Developer Firefox add-on to keep track of the validity of your code. That would hopefully result in a sleek, professional, CSS and XHTML-valid website!