Everything You Wanted To Know About DOCTYPE

Everything You Wanted To Know About DOCTYPE
February 23, 20102 Comments

Document Type Declaration. The differences between the many versions can be pretty confusing if you don't know which one you're supposed to use and why. In this post I will break down which DOCTYPE does what and why it's beneficial to use it.

Essentially, declaring a DOCTYPE at the top of every page tells the browser how it's supposed to render the markup and lays the guidelines for conforming to standardized best practices and specifications for building web sites, otherwise known as Web standards. Without a DOCTYPE declaration, your browser will render pages in what is called "Quirks" mode, a backwards compatible situation where everything is broken and doesn't appear as correctly as it should.

According to World Wide Web Consortium (W3C), (the community that develops web standards), there are 25 DOCTYPE versions in use today for web development, but we are only going to focus on some of the important ones below.

  • HTML5 (experimental)
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset
  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset

If you noticed a trend from the list, it's comprised of mainly HTML and XHTML DOCTYPE. So what's the difference between the two?

HTML

Hyper Text Markup Language was created in the 90’s by Tim Berners-Lee as a markup language that allows images and objects to be embedded and can be used to create interactive forms. HTML consists of opening and closing tags surrounded by angle brackets that form a structured document.

HTML Markup

<!DOCTYPE html>
<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

XHTML

Extensible Markup Language, or XML is another type of markup language which also consists of opening and closing elements tags surrounded by angle brackets that form a structured document just like HTML, but it's also used to store data so computers can read it.

XML Markup

<?xml version="1.0" encoding='UTF-8'?>
<painting>
  <img src="madonna.jpg" alt='Foligno Madonna, by Raphael'/>
  <caption>This is Raphael's "Foligno" Madonna, painted in
  <date>1511</date>-<date>1512</date>.</caption>
</painting>

Basically, a few years after XML was born, the W3C decided they should come up with a new version of HTML to make it proper XML. So, XHTML is a new version of HTML that is valid XML code.

HTML vs. XHTML

There aren't many differences between HTML and XHTML, the biggest thing is that all your tags must have a matching closing tag and all attributes be quoted. For example, when you create a link the opening <a> element has a matching closing </a>. What about the <br> tag? You don’t write <br>some text</br>. According to the rules of XML, each tag has to have a matching closing tag. In XHTML you now have to write your <br> tags like <br/>. That’s called a "self-closing" tag.

In addition to requiring every tag to have a closing tag (or be self-closing), some of the old tags and attributes that have been replaced by CSS are depreciated. For example, the <font> tag is no longer allowed. And the width attributes in tags, like <table width="50%">, are also depreciated. There are too many changes to name here, but if you would like to learn more about depreciated XHTML tags, you can read about it on the W3Schools website.

HTML5

HTML5 is the newest draft of HTML that simply triggers "standards mode" in the browser and is very short and has no Document Type Definition. It simply contains the tag name of the top element of the document, html.

<!DOCTYPE HTML>

Transitional, Strict and Frameset

Unless you build your web pages with Frames where each frame displays a different HTML document, you won't really have to worry about using a Frameset DOCTYPE, so on to the other two.

Transitional DOCTYPE is typically used where older, depreciated elements, tables for layout and depreciated markup are used.

Strict DOCTYPE is typically used when the presentation markup like inline css styles are moved to external css and is much more "strict" about what is allowed.

Tags not allowed in Strict DOCTYPE

  • center
  • font
  • iframe
  • strike
  • u

Attributes not allowed in Strict DOCTYPE

  • align only allowed on elements related to tables: col, colgroup, tbody, td, tfoot, th, thead, and tr
  • background
  • bgcolor
  • border only allowed on table
  • height only allowed on img and object
  • nowrap
  • target
  • width only allowed on img, object, table, col, and colgroup

So, Which One Do You Use?

If you typically work with older pages where tables are used for layout, depreciated tags and attributes like BORDER=1 are not quoted like border="1" and <FONT> tags are still used you should declare an XHTML Transitional DOCTYPE.

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

If you don't have the problem with depreciated <FONT> and <BR> tags, and use standard compliant markup with all presentation in a separate CSS file, then you should declare a XHTML Strict DOCTYPE.

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

Additional Articles on DOCTYPE

Author: VagrantRadio

Hi, I'm Jason. A front end developer from Grand Rapids, Michigan, and founder of VagrantRadio. I enjoy working with Css, jQuery, Php, learning new techniques in Photoshop and you should follow me on Twitter, Snipplr or Forrst.

Mojo Themes
  • http://www.loudable.com Suhasini

    Hey you have explained doc type beautifully, I also like theme of your website. Its amazingly designed.

  • http://www.vagrantradio.com Jason Pant

    Thanks Suhasini, I really do appreciate it.

Scroll to top