468,140 Members | 1,129 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

The doctype or DTD

7,435 Expert 4TB
The Doctype or DTD

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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  2.    "http://www.w3.org/TR/html4/frameset.dtd">
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Transitional. Transitional allows coders to use markup that was written using HTML elements that are deprecated, that is, those tags that are intended to be dropped from the standard and moved into presentational markup (CSS). If you have an older page containing tags like <center> or <font> or other presentational markup, you can use the transitional doctype while you "transition" the markup in the page to modern standards. Other than that, there is NO reason to use the transitional doctype.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict. ALL newly created pages should use the strict doctype. Strict means you are coding to the current standard with current elements and have moved your presentational information to a CSS stylesheet. Since all new pages should use strict, you can, essentially, forget about the others because they serve no purpose.

Expand|Select|Wrap|Line Numbers
  2.    "http://www.w3.org/TR/html4/strict.dtd">
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
By using the correct doctype, the W3C Validator can also warn you of errors in your code before you get too far along. You should always test your pages in as many browsers as you can but one that is modern and standards compliant is best. Firefox and Opera are especially helpful in checking compliant code.

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.
Jan 23 '07 #1
0 7927

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by CMAR | last post: by
6 posts views Thread by Patrick | last post: by
2 posts views Thread by DartmanX | last post: by
25 posts views Thread by Viken Karaguesian | last post: by
2 posts views Thread by PapaRandy | last post: by
24 posts views Thread by Jim Michaels | last post: by
11 posts views Thread by rfr | last post: by
6 posts views Thread by WT | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.