Understanding the Different HTML DocTypes (DTD)

If you’ve ever accessed the “Source Code” option on a web page or done some programming of your own, you’ve encountered the <! DOCTYPE> tag at the very top of the code.  This tag is called a Document Type Declaration or DTD.  It specifies what type or version of HTML you are using.

Specifying the correct DTD is important primarily because it defines how browsers will interpret your data.  This applies to your CSS code too.  Also, internet code validators will not be able to give your HTML a clean bill of health if the code and the tag don’t match.  Essentially, this tiny bit of syntax has a huge impact on how your web page displays.

In the past, the DTD tended to be quite long and scary looking.  Luckily, HTML 5 has simplified the DTD so it reads:


For those who are using HTML 4.01, there are actually three different “types” of this version: Frameset, Strict and Transitional.  The DTD varies for each kind.

HTML Strict is the best choice for you if you don’t like redundancy in your coding.  The thinking goes: why hand-code font and strikethrough text when you can just put that in your CSS style-sheets?

HTML Transitional uses the same outline as Strict, but is far more forgiving, allowing you to put in a few hand-coded stylistic instructions if you so desire.

HTML Frameset is basically a copy of Transitional, except that it is purposefully designed for frame based web pages.

The DTD for HTML 4.01 Frameset looks like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.mywebsite.com /TR/html4/frameset.dtd”>

The DTD for HTML 4.01 Strict looks like this:


The DTD for HTML 4.01 Transitional looks like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

Whatever HTML type or version you end up using, remember: double check your DTD!  If you put in the wrong DTD, your web page might not display properly.

Brian Flores is content writer and SEO for InMotion Hosting, one of the top dedicated server providers in the United States. He works with a wonderful team of writers to post useful tutorials on WebHostingHelpGuy. You can follow him on Twitter @BrianAFlores or @WHHG_InMotion.