How Important DOCTYPE Declaration is for your HTML Document

Today I am going to share a very basic problem related to DOCTYPE declaration. We all know that according to HTML standard it is must that each HTML document has document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

Have you ever think if you don't include DOCTYPE declaration in your HTML document specially when you convert your HTML document to any dynamic page like .php or .aspx. If your answer is no then following are the problem you could face during browser compatibility check:

1. First and major issue you'll face DIV element centering. If you have used margin: 0 auto 0 auto; to centering the any DIV element in your in your page it will go left align in the IE6 and IE7. Look at example below:

with DOCTYPE declaration

without DOCTYPE declaration

2. If you have used padding in any DIV element and adjusted the width of that DIV element it won't show correct in IE6/7. Look at example below:

Above are the examples I have faced during working on recent .NET project. If you have faced similar problem ever but different issue please share it here by leaving a comment.

Updated as on June 07, 2010.

3. This is a third instance I have noticed today during working on .jsp page. If you are using iframe in your .jsp page and have a scrolling auto, then it will not work on IE6/7. To solve this you need to declare DOCTYPE declaration in your external page. Look at example below: