Why DocTypes is important
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”>
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. 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.
Adding a DocType to your pages
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 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>
Why is it 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 ( 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.
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. That one little line can save you a lot of time and headaches. Fortunately, making sure you have one isn’t very difficult.