When you use an HTML editor such as Dreamweaver to create an HTML document, you’ll likely see a special line at the very top of your file’s source code, before the opening <html> tag. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Perhaps, though, your pages don’t have a line like this. If you’re coding HTML by hand, maybe you usually start directly with the <html> tag. Or, maybe your HTML editor isn’t configured properly to add a line like this.
So, what is this mysterious line, why is it there, and why is it so important?
Introducing the DocType
This line is called a Document Type Definition, or DocType for short. It tells web browsers what kind of HTML your page is using.
The truth is that all HTML is not equal. There are many different flavors and versions of HTML. Undoubtedly, you’ve heard buzz about HTML5. In reality, this is just the latest revision to the standards upon which HTML is built (aka the HTML specification). Before HTML5, there was HTML 4.0, HTML 3.2, etc. In the same way, there is XHTML, a flavor of HTML that requires stricter formatting and adheres to an XML-like structure.
So, the DocType simply tells browsers exactly what version and flavor of HTML you’re using in your page.
Why Is This DocType Thingy So Important?
Just as the HTML specification has evolved over the last 20+ years, so have browsers. The Wild West days of the 90s Internet meant that every browser essentially "did its own thing" and often disregarded the official standards. Fortunately, over the last decade or so, browsers have become mostly standards-compliant – that is, they closely adhere to the the standards set forth by the World Wide Web Consortium (aka W3C, an international standards organization that devises the official standards for the HTML language).
The unfortunately reality, though, is that there are still crummy web pages on the web from the 90s, and these crummy pages were designed to run properly only on the crummy web browsers of their day. To maintain backward compatibility for these pages, browsers essentially started including at least two rendering engines – the old "quirky" engine for rendering ancient pages that don’t adhere to standards, and the new standards-compliant engine for rendering newer pages that do adhere to standards and want to take advantage of new functionality.
So, how do browsers decide which rendering engine to use? You guessed it – the DocType.
The DocType tells the browser whether it should render the page in "Quirks mode" or Standards-Compliant mode. You can now see why specifying a DocType for your pages is so important. If you don’t specify one, browsers will go retro when rendering your beautifully-crafted pages… and you’ll end up with all of the wonderful bugs and display problems of a 10- or 15-year-old browser. Oops.
That one little line can save you a lot of time and headaches. Fortunately, making sure you have one isn’t very difficult.
Adding a DocType To Your Pages
As I mentioned before, the DocType definition line should be the very first line in your HTML page. Even though there are quite a few DocTypes you can choose from, the good news is that there are usually only a couple you need to worry about. One of the most flexible and common ones is the one I showed as an example earlier, XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you’re creating a frameset page, you’ll want to use this definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Because these DocTypes are XHTML based, they require stricter formatting (e.g. closing all tags). From a best-practices standpoint it’s good to close tags to avoid confusion. However, if you’re working with older HTML and don’t want to update, a slightly more flexible doctype is the HTML4 Transitional DocType. It doesn’t require closing certain tags such as <img> or <p> or <br>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you want to use HTML5 features (like the <video> or <audio> tag), you’ll need to use an HTML5 DocType – which is actually simpler than any of its predecessors. In fact, it is generally best to use an HTML5 DocType at this point for all new pages you create, since it represents the latest version of the HTML specification. This one is so simple, you can easily memorize it:
<!DOCTYPE html>
Simple, huh?
If you’re using Adobe Dreamweaver, the New Document dialog (File > New…) allows you to easily select a DocType for new pages:
Conclusion
Even though they seem rather intimidating at first, DocTypes needn’t cause consternation. Just be sure you always use one! It will save you time and headaches down the road, and proves you’re a top-notch designer/developer who really understands HTML.
Can’t get enough on this subject? You can go even deeper here.
Questions or comments? Share feedback in the comments below!