GiantIsland Logo

Your Ad Here

The Browser Doctype

A browser doctype ("document type declaration") is a small bit of HTML or web site "code" that appears at the top of web pages, when you view the source code for that web page. This small line of code helps web browsers determine the web page author's rendering intent, or markup "specification" used (for example versions 4.01 for HTML, or XHTML 1.0 transitional, etc.). This helps the browser figure out the best way to interpret the tags and styles used in the web page, and determines if the browser renders your code and style sheets using a newer more compliant model, or a "tag soup" model, where all your html is viewed as incomplete, and where the browser attempts to intepret your web page code and design as best it can (called "quirksmode"). In addition, many browsers are designed to ignore the doctype and render code based on other criteria, especially older browsers. To sort all this out, you need a general idea of what to use, so we will help you below. But that's basically what a "DOCTYPE" is in terms of your basic web page and its code.

You can read in-depth exactly what is "recmmended" by the www.W3C.org, who is responsible for setting rules and recommendations when using the various doctypes and their HTML specifications.

As mentioned above, browser doctypes also have been shown to control how some browsers render layout and CSS. The browser, Internet Explorer versions 5-8 (and a few other minor agents), are currently designed to interpret your web page layout and designs, as well as CSS, based on the way in which you use a doctype at the head of your web page HTML code. For example, Internet Explorer will actually use a different rendering engine or version of the browser when interpreting your HTML, based on how you use a doctype in that browser. Even avoiding doctypes still triggers a different interpretation of your code in some browsers, so you want to be careful and understand exactly whats best to use when adding doctypes to your web pages. The following are DOCTYPES and strategies we recommend you use when coding and displaying your web pages online.

Recommeded Web Page Doctypes

Now on to the doctypes! In general, you want to try and use a single, carefully formatted doctype at the top of your web page. The doctype should be the VERY FIRST ITEM at the top of every web page you design. DO NOT put any code in front of it. If you do, Internet Explorer, and a few other browsers, will revert the browser mode to "quirksmode", and render your carefull crafted HTML and CSS as a form of "tag soup". That's not good! It means your web page layouts will not be rendered based on CSS or Web Standards and you will have huge cross-browser issues between different browsers, when in quirsmode rendering. So, you want to avoid this possibility in all your pages, and make sure a well-formed doctype appears at the top of all code in all your web pages.

Why do doctypes force browsers to render HTML differently? In the past, DOCTYPE declarations were passive code lines. In other words, they didnt mean anything and the browser ignored them. They were originally relics of an older language from which HTML originated from (SGML). You don't need to worry about that. The main point to understand, is that over time, doctype declarations have become very important as a result of a technology built into many contemporary Web browsers similar to validation exercises. This technology is referred to as the "DOCTYPE Switch". When a browser with this feature finds a correct DOCTYPE declaration in your document, it will switch the browser into what is known as "Standards" mode. By tapping into the DOCTYPE switch, your CSS designs will be far more accurate between browsers. When NOT switched, due to missing or incomplete doctype, the browser assumes, again, that you have no formal intent as far as specifications, like HTML, XHTML, etc, so will try its best to batch together your code into a suitable layout using quirksmode. This results in horrible cross-browser issues, and will mean countless hours trying to fix layout bugs between different browsers. So make sure the doctype is always first at the top of your web page!

Now, back to using doctypes in your pages. Other than making sure the doctype is the first line of code in your web page (to avoid quirskmode), you need to be sure every doctype you use is a full, complete doctype, with a full URL in the tag. Again in IE, if you leave out an absolute URL in the actual doctype, and use a relative URL (or a missing one), it will again revert IE to quirksmode. Ughh!!! So again, make sure you use a full url in your doctype, as shown in the sample below. By the way, you can always test your pages to be sure they are interpreted as valid doctypes and your pages follow that doctype, by going to the W3C web page validator, at W3C Validator. It will help you see what the browsers see and if your doctype and web pages are well-formed and validating against the doctype as the browser validate them

Below are the doctypes we recommend at the top of your page. Keep in mind XHTML is much better that HTML doctypes, as they use the newer CSS and XHTML specifications and recommendations and allow your pages to move forward into the new web thats evolving where web pages are now XML documents and content is "re-purposeable" or reusable by many devices and agents. XHTML is a nice transition framework and will allow you to use your plain HTML, minus the attributes and bad formatting, yet gain all the benfits of speed, CSS design, and SEO gains that comes from using XHTML.

To begin, below is a very loose HTML 4.01 doctype, which is the minimum doctype standard any web page on the Internet should use. Using this older doctype, you can use "old-fashioned" tag-soup HTML, and write code like font tags (<font>) and use the browser element attributes for general web page formatting, rather than style sheets. We do not recommend it, however. If you are new to the web and still learning older HTML (i.e. ASP.NET 1.1), use this at the top of your page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For web sites that use framesets and HTML 4, use this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Now, on to the XHTML doctypes. This first one is by far the most popular doctype. Use this one if you want ti use plain HTML, but without some of the attributes used fgor formating and for web pages that depend more on CSS and style sheets for design. When you add these doctypes (exactly as recommended above), Internet Explorer will go into "Standards Mode", as will many other browsers, and correctly interpret your CSS and HTML markup as standardized code. This makes cross-browser design much much easier, as the newer agents are very close in interpreting XHTML and CSS when in standards mode. This is especially true of Internet Explorer 7, Firefox 2, and Safari 3. Keep in mind, evfen though you are telling the browser you are using XHTML, this doesnt mean you are formally requiring the browser render XHTML. To do that, your server needs to be configured to send XHTML using "content-type" headers. In addition, Internet Explorer does not yet formally recognize XHTML nor parse your pages as XHTML as a validating parser, like Firefox and the GEcko browsers do. So, until IE and others clean up their act, just use the doctype to trigger standards mode in IE and the others, and that will help you move forward as the browser move forward with XHTML.

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

For XHTML that use HTML framesets, use this doctype.

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

Many shops are moving towards using the newest XHTML flavor: XHTML 1.1-strict. This is a formal cross-over from HTML to XHTML, and is designed to help transition web developers from older HTML or a formal XML markup language that has very strict rules. Feel free to use XHTML and search the web for a list of the rules and tags allowed. Its still very close to HTML, but not as free as XHTML-transitional.

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

Advanced users who wish to add their own tags and modifications can use the modular specification of XHTML below. This spec, as well as HTML 5.0, XHTML 2.0 and the newer doctypes are not covered here in depth, as of the time of this writing, they are still not well established specifications nor used by the current web browser community.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ok, here is our last recommended doctype. For mobile device web pages, we recommend the XHTML-basic doctype, as it allows your mobile web pages to look good on all types of PDA's, handhelds and mobile phones. We realize more people are enamored of their iPhones and high end mobile devices, many of which allow full views of desktop browser pages via a wireless connection. You might say, "why then do I care about mobile web pages?". We cannot emphasize enough the importance of inclusion, when it comes to mobile web page design, and using XHTML-basic allows you to reach more devices and more people, that just teh iPhone community. There are still lots and lots of people on very tiny mobile phones and primitive agents and a variety of handhelds that do not render desktop web pages correctly. In addition, the W3C has created mobile doctypes to include more mobile agents, and increase content repurposing and server responsiveness to wireless devices and their often reduced bandwidth connection speeds. This doctype will set you on the right path for mobile web page design. Note: XHTML-basic uses a smaller subset of HTML, so search online for a complete listing of the tags allowed for this spec before you start.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

One Last Little Doctype Bug...

You need to be aware that the XHTML flavor of browser doctypes are actually part of XML and a system that tries to associate your web code to an XHTML/XML validated markup specification. Because XHTML is the newer specification, its normally associated with XML, so the DOCTYPE is actually part of how "validating parsers" or XML parsers interpret XML. Remember, XHTML is a hybrid of HTML + XML, and Firefox interprets XHTML doctypes as XML, so require an additional XML code before a doctype. (Below is a sample of that XML prologue and how it should look at the top of your page above an XHTML doctype in Firefox, were you to use this correctly as designed and attempt to validate the XHTML against its true doctype). Again, browsers like Firefox, who understand XHTML, will trigger a validating parser to validate your code against this strict XML-based ruleset for XHTML, when you use both the XHTML doctype combined with a server-delivered XHTML content-type header. If any single part of your page is mis-typed or not "well-formed" as XHTML/XML, it would fail and a nasty parsing error display in Firefox and the newer agents. Thats one problem, and one reason NOT to use the XML code. But the XML prologue doesnt even work in current Internet Explorer browsers, because IE 5-7 still do not interpret XHTML as a valid specification tied to XML. So, they will fail in IE. The result isnt a nasty validation error. Instead the IE browser reverts to good ol' quirksmode, causing very different interpretations of your doctype and pages between Internet Explorer versions and Firefox/Gecko engine browsers. What a mess!!!

<?xml version="1.0" standalone="yes" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

So we just wanted to say again: Avoid XML prologues with browser doctypes, for now, and just use the doctype alone, until the browsers catch up to the recommendations at the W3C. It may work ok for Firefox after allot of bug free code fixes, but will still force IE to do something much different, visually.

If you liked our article, check out web products, which follow the right specifications. Try one of our Photo, Audio, or Video Website Products!