Remember declared the DOCTYPE in your web page

In general, the “DOCTYPE” tag is tells your web browser how to validate or process your web page according to the w3c rules and avoid some web browsers (especially IE) to turn itself into “Quirks mode“.

Quirks mode is disaster

Let go thought an example to know how quirks mode mess up your web page.

A simple HTML code with no ‘DOCTYPE’ declared.


<html>
<head>
<style type="text/css">
	#page{
		width:700px;
    	margin:0 auto;
	}
	#header{
		border:1px solid blue;
		height:80px;
		margin:8px;
	}
	h1{
		padding:16px;
	}
</style>

</head>
<body>
  <div id="page">
  	<div id="header"><h1>No DOCTYPE declared!</h1></div>
  </div>
</body>
</html>

The “margin:0 auto;” will auto align the header block in the center of the page, and supported in IE7, 8 and Firefox. Let’s try it.

  1. Firefox – If you view the page in Firefox, it’s working fine.
  2. IE8 – If you view the page in IE8, the center alignment is not working.

Here’s the problem, the IE8 is support the “margin:0 auto;“, but why it’s not working? This is because your IE8 is turn itself into “Quirks mode“, it’s means turn your web browser into backward compatibility mode, it will render your web page in IE6 mode.

IE6 best award as the world worst web browser, you just do not want your nicely designed HTML layout turn into shit. Beside auto margin, there are hundreds of the CSS elements are not support in IE6, now you see the importance of the DOCTYPE?

Declared DOCTYPE!!!

To avoid IE8 turn it into “Quirks mode“, you have to declare the DOCTYPE tag in front of the HTML content. For example,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
...
</head>
</html>

Try view it in IE8 again, the center alignment is working fine. No more “Quirks mode”, it will render the web page in IE8 standard.

Reference

  1. http://www.w3.org/QA/2002/04/valid-dtd-list.html
  2. http://en.wikipedia.org/wiki/Quirks_mode

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Ron Rainer Recent comment authors
newest oldest most voted
Ron Rainer
Guest
Ron Rainer

Internet Explorer 8 is the last version of Internet Explorer to be supported on Windows XP and Windows Server 2003; the next version, Internet Explorer 9, is supported only on Windows Vista, Windows Server 2008 R2, and Windows 7 operating systems.:`”:

http://www.caramoan.ph

Most interesting brief article on our web page