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


Why do we need doctype in HTML/JSP pages? Pages seem to work without it.


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



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.


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.


Sure, all html documents need DOCTYPE to declare the version of html and tell browser how to translate the html So that you will avoid many browser bugs.


When you set the DOCTYPE on a page this forces the browser into standards compliance mode, which enforces stricter rendering rules.

If you don't use it, IE could drop back into quirks mode, which could cause page display issues.

See this link on Remember to declare your doctype.


doctype it is an instruction to the browser about the version of the markup language is use. doctype enable the html Attribute.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »