The REAL Beginners Guide to DOCTYPES

Greetings!

What I am hoping to do is to lay out what a Doctype is, how it works and why using one is essential. It has been covered on this forum many many times, and explained by the gurus in countless ways but as someone who had no understanding of them under a year ago, I know that it only takes one overly technical word to throw you off and get frustrated or confused with it all. Consequently, I would like to take a second to explain for those who really have no idea about what standards or a Doctype is but know they want to do web design.

Let's start by imagining the browsers as people. They all speak the same language but all have different dialects and accents. One browser might be an Englishman, whilst another an American for example.

If we send these browser folk the same message saying "Just a second, my pants are coming off", the American browser dude might think "Fair enough, you should tighten your belt", where as the English browser chap is more likely to think "Are you flirting with me"? Two different responses from the exact same message because the word 'pants' is commonly interpreted as underwear in England, and as trousers in America.

In web design this means that two browsers can look at the exact same code and produce quite different results owing to their interpretation of certain words and syntax. What we need therefore, is just a way saying "I know you both have different words for different things, but if you both just look up the words you come across in this here booklet, you'll both understand what I'm on about". It is still your decision which dialect you want your code interpreted as, but once you've chosen, the Doctype then provides the link to that booklet so all browsers see it the same way.

There is of course one catch. It doesn't matter whether you meant your sentence to be read in an American way or an English way... if the grammar and spelling are awful, no browser will be able to read it perfectly. This is why for the Doctype to work and make sure all browsers are happy, we must validate.

Most of us have been validating for years. When we send out a letter to a business client or print our CV we might run the spell checker over it first and this is validation. The tool we use to validate HTML is found at the following address where you can run your URL through, upload the code completely or upload a file.

http://validator.w3.org/

It will then kindly list all the errors you have in your code for you, so you simply have to go through, correct those errors and once done you know you are sending the correct code to all the browsers with a guide on how to interpret it included.

NOTE : Just like people, there are still stupid browsers who, guidebook or none, are illiterate so just ignore parts of it. This is where hacks and workarounds come in but if you've validated accordingly, you should be well on your way to having it fixed. Hacks are often ways of saying "Just a second, my pants (of the trouser variety) are coming off", or "Just a second, my pants... oh forget it, you wouldn't understand" so that you can carry on and no misinterpretation has taken place.

In this post, I have used the American and English accents as examples, but in web design the two main 'accents' are HTML and XHTML. Wondering which one you should be using? Well check out Hugo's thread here...
http://csscreator.com/node/8878

Finally, I haven't gone in to what happens if a browser does get confused by what you've written (quirks mode). Nor have I mentioned the middle ground (transitional doctypes) which are used for when you've written words that aren't used in either dialects anymore and consequently won't be in the 'booklet'. This thread is just to give you an idea of the purpose of using a strict doctype.

One more thing, they should be the VERY FIRST line of code in every page you create! So that's how they work and what they're for on a very basic level. I hope that helps, and as I say, if you want a more technical overview there are hundreds of explanations probably on this site alone so go and explore!

Happy validating,

John