Jump to content


Web Site Design, Usability, SEO & Marketing Discussion and Support

Sign in to follow this  

Document Type Definitions - DTD's

Recommended Posts

As promised here’s some info on Document type Definitions, or DTD’s. I don’t intend to go too deep into them, feel free to add anything you thinks important!


Firstly, a DTD is a statement at the top of a web page, which tells the browser what type of page it is. As we are currently in a bit of a transition with HTML4.01 moving onto XHTML1.0 it’s a fair bit more important than it maybe used to be.


I don’t really want to get into the differences between HTML and XHTML here, suffice to say there are quite a few changes in the recommended standards as to how certain things should be done. Moving more away from HTML attributes to CSS styles as the main thing.


The main 3 DTD’s you need to worry about for HTML are:


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


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


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



If your not familiar with DTD’s then a quick overview of what they mean might be in order.

The main bits to look at are the //W3C//DTD HTML 4.01 Transitional and the end of the http://www.w3c.org/TR/html/

The first part tells you which overall standard you are using. HTML 4 was the first step towards bringing CSS styles into the main overall standards. If you’ve done any research into tags and standards you may keep seeing notes about some of them being deprecated. This basically means that although they are in the standard, it’s a historic thing only and you should use an alternative method.


The URL points to the exact document defining the terms of how the tags in the document should be applied. In the examples above you can see the only differences are at the end of the URL’s mentioning either the strict, loose or frameset.


Using HTML4.01 you should use one of the above tags at the very top of any pages on your site.

The first 2 have fairly nominal differences, however if you use frames you should use the 3rd one.


The differences between the strict and loose definitions are basically how closely you adhere to the recommended standards. Unless your going out of your way to ensure you are using valid HTML4.01 markup I would recommend the loose definition when not using frames.


As with HTML there are 3 main DTD’s for XHTML:


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


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


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


Again the first 2 are fairly similar, it really depends how strictly you are sticking to the standards. The main place that this will make a difference is if you run the page by a validator. Using a strict definition where you have used markup that maybe in HTML4 but not in XHML1 with throw up lots of errors when you run it through a validator like the one at the W3C.


As with the HTML DTD’s, if you are using frames you should use the frameset DTD (the bottom one) and unless your are making sure your markup is correct then use the transitional DTD (middle one).


For some more information I would recommend having a look at this article on the Web Developers Virtual Library. Its aimed at XHTML and has some good info on the differences between HTML4 and XHTML1. Several of which I only just learnt reading it!

Although there is a bigger step forward to using things like CSS there are several other differences noted on the ‘Differences with HTML 4’ which maybe minor coding things, it’s the kind of thing that makes the difference between a strict DTD and a transitional one.


Although most browsers are fairly kind if you don’t include a DTD it can throw up problems. Most of the current ones will default back to HTML4.01 transitional loose. NS4.x will probably go back a little further, I’m not entirely sure. Gecko powered browsers though (Mozilla and NS7) can be a bit random if not specified. Gecko is intended to be very standards compliant and as such pretty much expects you to include one I think! Therefore, in some cases, adding an appropriate definition may solve problems.


There is a lot of other information about DTD’s out there, though I have found it difficult in the past to find info on different definitions grouped together. If anyone knows of such a resource please post it!

Share this post

Link to post
Share on other sites

It is difficult to find resources involving Document Type Definitions (DTDs) that are comprehensive.


I've collected some, and have listed them below. I have to confess that I've learned more than a little in compiling this list that I wasn't aware of, too.


One important reason to use a DTD is that newer browsers, such as the latest mozilla/netscape, will display a page in slightly different manners based upon which DTD you use on your page. If you don't include a doctype, the browser will use a mode of looking at a page that doesn't include a number of newer standards. That mode is known as "quirks" mode, and the name fits. Especially if you are trying to use CSS. That can cause problems, such as making centering of text in tables not work correctly if you're trying to use CSS to do formatting.


It's also important to know a little about these DTDs if you use a WYSIWYG editor, because HTML editing programs that select a DTD for you don't always use the one that they should.


Below are some pages on DTDs, and a little snippet from most of them:


DOCTYPE Explained


You may have run into cases where you used CSS to set a certain font size for the BODY element, only to find that the font size didn't get applied to tables. This relates to some legacy problems with tables and the inheritance of styles. In bugwards compatibility mode, this behavior will continue. However, in strict mode, any styles which can be inherited into a table will be.



Doctype switching and standards compliance: An overview


What is doctype switching?


Summary: Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode.



Activating the Right Layout Mode in Mozilla, Mac IE 5 and Windows IE 6


In order to deal with both old tag soup written to old browser quirks and new standards-compliant pages, Mozilla (and Mozilla-based browsers, such as Netscape 6), Mac IE 5 and Windows IE 6 have two layout modes. In one mode the layout engine attempts to comply with W3C Recommendations. In the other mode the layout engine tries to mimic old browsers. In Mozilla these modes are known as “the Standards mode” and “the Quirks mode” respectively. In this document the same names are used also when referring to the modes of Mac IE 5 and Windows IE 6.


Note: The latest Mozilla builds have almost three modes. They have a variant of the Standards mode known as the Almost Standards mode. The Standards modes of Mac IE 5 and Windows IE 6 are closer to Mozilla’s Almost Standards mode than to the (Full) Standards mode. The table below includes the new behavior, but I have not yet had the time to revise the prose of this document entirely.



Standards ... or be careful what you ask for


It is very important that you use the appropriate DOCTYPE in order to tell the browser how you expect your page to be laid out. Here's a brief DOCTYPE usage guide.



A List Apart - Fixing your site with the right doctype


YOU’VE DONE ALL THE RIGHT THINGS, but your site doesn’t look or work as it should in the latest browsers.


You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.



Mozilla Quirks Mode Behavior


The following is a rough list of the differences that exist between Mozilla's standards mode and quirks mode behavior.



Table Centering Test


This document attempts to illustrate various methods for centering tables, either by using CSS, or by using html methods in the context of a transitional doctype declaration. For examples of centering other block-level elements such as paragraphs, see the "Centering blocks" page.



Feedback: Table Centering with CSS


This document is a companion to "Table Center Test". The purpose of this document is to further demonstrate examples of browser behavior (either submitted by readers or discovered by me) on the table centering examples given the page above



Mozilla's DOCTYPE sniffing


This document contains describes how Mozilla uses the DOCTYPE declaration to determine strict mode vs. quirks mode.



All My FAQs Wiki: Doctype


Questions asked, and answered:


What is a DOCTYPE and which one do I use?


How is the lack of a doctype an error?

Share this post

Link to post
Share on other sites

Thanks for compiling the data in one place.




I guess it's too late to reiterate the "one world, one browser" plea of some years ago?


As far as I can see, one should assemble some sort of huge wall chart documenting the various browsers and DTDs, and somehow choose which DTD to use on a particular site today.


Personally, I use a combination of tables and CSS, and have been only slowly letting out the reins on the CSS. This seems to work well, and we don't experience the coliding images and text that one sometimes sees. But this whole advancing DTD thing can be a bit much. I guess that's what you "pay" for advancement.

Share this post

Link to post
Share on other sites

I was told that the DTD statement is necessary for a search engine to be able to read a page. Is this true?


I have several sites which do not have the DTD statement and have been indexed by the major engines.

Share this post

Link to post
Share on other sites

If you do not define a DTD you could get problems with anything designed to read the page. If there is no definition it will make assumptions. I imagine at the moment most things will assume HTML4 transitional. So, if thats about right for your site it won't cause problems, if its full on XML though you may well have difficulties.


As I believe I mentioned before, Mozilla tends to go into 'Quirks' mode, sometimes things will be fine, other times it will break badly.


With technologies like XHTML and XML coming into use more, and not necessarily as replacements for HTML, it will become more and more important to declare the language you are using.

Share this post

Link to post
Share on other sites

Wow, you've really put a lot of effort and research into this topic. Well done. It should really help people. When I was reading through the posts one or two things came to mind.


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


is a document type declaration and not the Document Type Defintion.

When you say:

The URL points to the exact document defining the terms of how the tags in the document should be applied.

is a bit unclear what the DTD actually defines. A DTD defines amongst other things which tags may be used, which order they can appear in, which attributes these tags can have, what values these attributes can have, down to the specifics of what can appear between tags i.e. character data, comments, other tags etc.

A DTD says nothing about how presentation should be applied to a document. By declaring a DTD you should be saying 'my page has no errors for the type of document it is, go on and parse it. And please display it correctly'.

Browsers have default DTD's if none are declared and try to fix documents that won't parse so that at least something is displayed.

Browsers also have default presentation to apply to .html pages.

If you don't declare a DTD you're saying to the browser 'guess how to parse this and guess what order the tags should come and what the attributes mean.'

And if isn't valid for that DTD you could never get the right display settings applied to your document. Never.

If we write well-formed and valid webpages we can complain about differences in how the browsers display things. If we don't then we're snotty kids deservedly getting our noses wiped.


Share this post

Link to post
Share on other sites

When reading up on language codes, I realized that the DTD actually contains one. For most people here that's "EN" for English, so nothing to worry about, but if you're in a non-English speaking country, it could be relevant.




I checked a couple of big sites in Dutch, and the ones actually containing a DTD, all had "EN" for English.



Does that code replace <html lang="en"> and the content-language metatag?


Or would that particular language code just say that the HTML is some kind of English?




Share this post

Link to post
Share on other sites

The Document Definition Declaration is. as JamesIII noted, the statement at the top of the web page which tells a browser which document type definition is being used, and where to locate it.


The "En" included in the declaration is noting that the defintion is in English.


The last two letters of the declaration indicate the language of the DTD. For HTML, this is always English ("EN").


(From the W3c's write up of html 4.0)


One of the W3c pages on Language information and text direction includes an example where this snippet is from:




<HTML lang="fr">


<TITLE>Un document multilingue</TITLE>



Note that the html is in English, but the text of the page is in French.


I think that there have been some efforts to translate DTDs into other languages, and those may have an HTML that isn't in English.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this