The Purpose and Importance of a DOCTYPE

Date November 8, 2010

doctypeRecently someone asked me what a DOCTYPE was. I paused for a moment and thought, “well, I know the DOCTYPE is the first thing at the top of every webpage, even before the HTML tag.” Quite honestly though, I had no idea what the purpose of it was. When I start coding a new page, I let Dreamweaver create a new blank document and generate whatever the default tags are. DOCTYPE was one of the ones it tosses in there for me. I figure, if this is a standard thing on webpages, I should know what it is, why it’s there and why it’s so important. Yes, DOCTYPE is important. Why do I know this? It’s on every page of every website, or at least it should be.

For example, the DOCTYPE on this website looks like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

But What Does it All Mean?

Let’s break down what DOCTYPE means to try and make it easy. DOC means document. TYPE means type. Plainly put, the DOCTYPE declares what type of documentation (or rules) our HTML page is being displayed with.  If you don’t declare a DOCTYPE, the browser will assume you have no idea what you’re doing and will go into “fix-it” mode generally using the transitional ruleset as outlined below. The action is not the same from browser to browser. The unpredictability of that in and of itself should encourage you to not only use a DOCTYPE but also the proper DOCTYPE. If you’re paying attention that means there are different types of documentation, or sets of rules, that each website can be displayed using.

Strict DOCTYPE

The first of three types is the strict DOCTYPE. Any website with strict DOCTYPEs will tell the browser to follow the HTML rules as set by the W3C. For those of you not in the know, the World Wide Web Consortium is the lovely group that outlines and sets all the HTML standards that us developers should be following. That means that any website using using this DOCTYPE will not display deprecated items like the <font> tag (if you’re still using <font> I’ll ask that you please back away from the keyboard slowly, then call me for some consulting help).

Let’s say that you didn’t know what a DOCTYPE was and you never included it on your webpage, but then you also used <font> tags. I bet you had all kinds of trouble trying to figure out why the darn code you were using didn’t work. Well, if you don’t specify within the DOCTYPE tag which type you want it to use, then your browser is trained like a good little puppy to display your page using strict rules by default. You see, the strict DOCTYPE makes you stand up straight! Stomach in, chest out! It accepts no substitutes or less than what the rules call for.

Strict HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

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

Transitional DOCTYPE

The transitional DOCTYPE is for those of us who are want a little bit of everything. For instance, you don’t want to stop using <font> tags (shame on you!) but you have moved onto trying out some of the newer rules. Basically, this DOCTYPE gives you greater flexibility and tells your browser it’s okay to use both current and deprecated tags.

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

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

Frameset DOCTYPE

If you were to use frames (which you shouldn’t), then the frameset DOCTYPE can be used. It will tell your browser to use the rules of the transitional DOCTYPE but also allow for frames. For the record: frames are bad for SEO, search engines, usability, bookmarking and it just plain looks bad.

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

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

As you can see in my examples above, you can tell your browser through the DOCTYPE tag if your page was built in HTML or XHTML. It will also include a URL to the official W3C website. It points to the exact page where the rules for that DOCTYPE actually exist. You’re telling the browser, “this is the DOCTYPE that I want you to use and here’s the rules to support it.” That leaves zero questions, your browser has less to think about and will display your page quicker. As standards change, using these URLs will allow browsers to seemlessly support your HTML code even after the W3C posts new standards.

It’s important to keep up with what’s changing with the W3C. As they release new versions of HTML or XHTML, our DOCTYPE tags will need to change in order to maintain top standards. For example, with HTML 5 now making it’s way towards the mainstream, the tag you would use is <!DOCTYPE HTML>. Pretty simple and quite a bit different than current methods, however it’ll be the new standard!

Now remember, if you don’t follow the rules, your webpage just won’t work right. So with a little bit of practice, you’ll be able to keep that stomach in and your chest out. C’mon, show me what you can do!

2 Responses to “The Purpose and Importance of a DOCTYPE”

  1. Winnie said:

    Oh I knew this one! I was thought this in school last year, and we’re required to always use Strict doctype, or we’ll get a zero on our assignment.

  2. Cindy T. said:

    Great explanation Kim!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>