Doctypes - What They Are, Why You Need One, And How To Use Them For Your Website

Introduction

Doctypes are some of the most misused pieces of code standard to all websites. In fact many amateurs and beginning programmers don't even bother to put one in! The common reason for this being:

"But my website works fine without one!"

True your website may function without one but then again how many browsers have you checked this in, how many resolutions have you tested, and how advanced is your website? Just for clarification a Doctype is a piece of code that goes in the first line of an HTML webpage. It looks like:

Don't worry about what's in it just recognize that this line is a Doctype. And I said 'a' Doctype as the fun part is there are a whole bunch of them. Which is why it is so important for you to understand which type pertains to your website.

About Doctypes:

Doctype is an abbreviation for 'Document Type Object' which basically summarizes that your webpage, while in document type, is actually and object and thus treated so. As you can see without this piece of code your browser may not know if your website is and object, what form it takes, and thus may be very confused as to how to render it. Luckily IE and Mozilla will try very hard to render your page correctly but why tale a chance that thy get it right all the time?

Definition- 'Render': When programmers talk about browsers rendering they mean exactly how the browser complies the code, what standards it follows, and how the code is projected on the screen (eg. is it what the programmer intended?).

Using a Doctype will ensure that all major browsers (IE, Mozilla, Safari, Opera) will render your website exactly the same every time it is viewed. Also for example Internet Explorer (R) 6.0 will render your site the same as 7.0. So now that you realize the importance of Doctypes, where do you head from here?

Additional Information (before you begin):

Doctypes are created and stored on the World Wide Web consortiums servers (W3C.org). They are in fact links to actual documents which set the standards for how browsers use code you implement in your website. For example a Doctype will let the browser know how to calculate where an image goes on the screen when a programmer specifies its location in a percentage.Without this information the browser will revert back to its standard formatting. For example if you specify an images location as 20% to the right and your div element 22% to the right, it may look fine in mozilla and overlap in IE (and vice versa). Thus you can see in order for your website to be rendered the same in every browser you must include a relevant Doctype.

Determining the correct Doctype:

Determining which Doctype you should use for your website is not very difficult as long as one MAJOR rule is followed. Don't use the short version:

Many programmers make this mistake forgetting that the URL given in the Doctype (/TR/html4/strict.dtd) will only work for the W3C.org website. Everyone else has to use the long version. (It's only slightly longer ;). So lets begin!

Step 1. - Determine what form of HTML you are using (HTML or XHTML)

Step 2. - Know the three major types of Doctypes:

Note - I have taken out the http://www. part of the link! This must be replaced in order for the Doctypes to work!:

Thus:

becomes:

Strict - For use with websites that contain CSS (Cascading style sheets) and for websites that want a clean display without presentation attributes (In the elements themselves). This doctype must not be used if the website contains frames or links with targets (eg.

HTML

XHTML

Transitional - For use with all elements that may or may not contain attributes which W3C expects will eventually be handled by CSS. For example use this doctype if your HTML markup looks like -

HTML

XHTML

Frameset - Should be used when your website contains frames (css can also be used with this doctype). This Doctype is mostly the same as the transitional doctype except was designed for frames:

HTML

XHTML

And that's all there is too it. For more information about html, css, and javascript don't hesitate to check out my website!