Why do we need DOCTYPE to the HTML/JSP pages?

html jsp doctype

19,954

Solution 1

Zeldman wrote

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.

and Take a look at 24 Ways Article "Transitional vs. Strict Markup"

at coming HTML 5 , you'll only need to declare

<!DOCTYPE HTML>

Solution 2

Escpecially Microsoft IE has a major problem with certain doctypes or a complete lack of doctype. At the bottom of this page you can find a concise overview of browser behaviour in combination with certain doctypes. There are three standard behaviours:

Q - Quirksmode. You really don't want to have that. It triggers box model bug in IE. The CSS width and height then incorrectly covers the padding and border.
A - Almost standards mode. Affordable, only vertical sizing of table cells is not as per CSS2 spec. Useful if you want to avoid mysterious gaps of images in table cells.
S - Standards mode. Browser tries to be fully w3 HTML/CSS standard compliant. Preferred mode since it's the only mode you can be less or more certain that your website will look exactly the same in all browsers.

Here's a piece of HTML which demonstrates the box model bug in IE. Copy'n'paste'n'run it. With <!DOCTYPE html> present, you'll see a rectangle. Without the doctype line you'll see a genuine square.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Remove DOCTYPE to trigger quirksmode</title>
        <style>
            #box { 
                background: yellow; 
                width: 100px;
                padding: 20px; 
                border: 20px solid black; 
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="box">box</div>
    </body>
</html>

The influence of this IE bug is the most noticeable when you want a "pixelperfect" webdesign.

Solution 3

See http://www.quirksmode.org/css/quirksmode.html for the full discussion; in short, doctype is supposed to trigger quirks/strict mode of page rendering and behavior.

Unfortunately, people started throwing in doctypes without knowing what they do, thereby lessening their usefullness.

19,954