As web developers we have the tendency to blame web browsers for inconsistencies and for not displaying the pages as designed. Most of the time the blame is justified, but there are instances when the blame lies at the feet of the web developers. For example, incorrect CSS declarations, missing closing tags in HTML documents will break you website. Another common and often overlooked reason of broken web pages is the missing or incorrect DOCYTYPE declaration.
If your website is not rendered properly by some browsers, the first thing you need to check is the first line in your HTML document.
The first line of every HTML document should have a valid DOCTYPE declaration. A missing or invalid DOCTYPE sends browsers in to the quirks mode and then the web browser uses its own methods to parse and render your page.
What is DOCTYPE?
A Document Type Declaration (DOCTYPE) informs the browsers which version of (X)HTML your web page is using. Browsers use this information to validate and render your documents. All compliant web pages must begin with a valid DOCTYPE declaration. If you don’t include a DOCTYPE declaration or if it is not valid, your web pages will not be validated and the web browser won’t be able to render your web pages properly.
Why DOCTYPE is important?
All standard-compliant browser need some information about the page to validate its content and then display it properly. There are several versions of HTML and XHTML and browsers need to know the version you are using.
A DOCTYPE tells browsers which (X)HTML version you are using and help them to render your page in standards–compliant mode. This will ensure that your pages are displayed by all browsers like you want them.
[ad#GreyLeft]But if you don’t include the DOCTYPE or if your DOCTYPE declaration is invalid, most browsers will assume that you are using an older version HTML and your page does not meet latest standards. The browser will then try to parse and render your page in backward compatible fashion (known as quirks mode) and may use browser-specific DOM.
Of course, you don’t want this. So save yourself some time and frustration by adding one of the following DOCTYPES in all your HTML page.
|Version||DTD list||DOCTYPE Declaration in documents|
|HTML 4.01||Strict, Transitional, Frameset||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
|XHTML 1.0||Strict, Transitional, Frameset||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
I copied these DOCTYPE declarations from W3C website. You can find complete table of DOCTYPE declarations at http://www.w3.org/QA/2002/04/Web-Quality.
This one line in all your HTML pages will make your relationship with browsers a little less stressful. My advise to all web developers, “Don’t publish a web page without DOCTYPE.”