7,435
Many coders get confused by all the talk of doctypes and how they affect browsers and the display of their web pages. This article will get right to the point about doctypes and their use.
Doctype is short for its full name "Document Type Definition", or DTD. If you pay attention to what those words mean, you will notice that it is used in your web page, the document, to define the data types, that is, the elements your page contains. This is where your browser learns what a <div> tag means and what its attributes are. Without defining the types, you are leaving the browser free to decide how to define such things itself and it will do the worst thing possible by assuming "quirks mode".
"Quirks" is the mode older browsers settle into due to an issue with Internet Explorer years ago. The folks at Microsoft misinterpreted the W3C web standards in several ways. For example, while all other browser makers understood that margin and padding spacing fell outside the boundaries of a containing element, Microsoft made Internet Explorer put the padding on the inside. Along with other errors, this gave pages written to the standard a "quirky" look in Internet Explorer.
To correct this problem, browsers now look for a proper doctype as the first line of code in every web page. Without it, they assume "quirks" and it's like 1996 all over again. So what does that tell us?
A proper doctype is REQUIRED on each and every web page to guarantee the best adherence to the standard by ALL browsers.
Which Doctype?
There are three: strict, transitional and frameset. Let's look at them individually in reverse order.
Frameset. If you are using frames in your code, this is the one to use.
For HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
- "http://www.w3.org/TR/html4/frameset.dtd">
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For HTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Warning: some browsers, IE specifically, look for the doctype on the very first line of the markup. If any characters of any kind preceed the doctype itself, the browser assumes no doctype is present and goes into quirks mode.
The XML Declaration
In you are reading about XHTML, you will come across this line before the doctypes listed above: <?xml version="1.0" encoding="utf-8"?> . This is a XML "Processing Instruction" or PI. XHTML is, after all, XML formulated as HTML so your page can use HTML elements. But it is XML so it must be declared as such.
Unfortunately, Internet Explorer less than version 7 will stumble on this and go into quirks mode for the same reasons mentioned above. So it is best to just leave this line out for now. Chances are you are serving your page as text/html and declaring XHTML isn't gaining you any benefit anyway. If you are serving XHTML as text/xml+xhtml then you know you are serving browsers that can handle XHTML natively. Then the XML Declaration should be included on the first line. Be aware, though, that Internet Explorer does not handle native XHTML.
