HTML5 Doctype

HTML5 Doctype

So what is this doctype thing?

Where does it come from and why do we need it?

A Brief History

While working on Internet Explorer 5 for Mac, the developers at Microsoft found themselves with a bit of an issue. The new version of their browser had improved its standards support so much, older pages no longer rendered properly (actually they did render properly according to specifications but people expected them to render improperly if that makes sense.

The pages had been actually been made based on the quirks of the current browsers, i.e Netscape 4 and Internet Explorer 4.

IE5/Mac was so good, it broke the web.

So the bods at Microsoft came up with a solution. Before rendering a page, IE5/Mac looked the Doctype.

This is place at the top the HTML page even before the <html> element. Older pages (that were built for the old no standards browsers) generally didn’t have a doctype at all. IE5/Mac rendered these pages like older browsers did.

In order to “activate” the new standards support, web page authors had use the right doctype before the <html> element.

Soon all major browsers had two modes: “quirks mode” and “standards mode.”

This of course got out of hand. So when Mozilla tried to release version 1.1 of their browser, they discovered that there were pages being rendered in “standards mode” that were  relying on a specific quirk. Mozilla had just fixed its rendering engine to eliminate this quirk so thousands of pages all broke at once.

So wait for it they had to create “almost standards mode”. Insanity at its best.

So what does this crazy Doctype thing look like?

XHTML Doctype

Below is the doctype that most of us have been using for a good few years. But it is actually only one of 15 different doctypes that could be used to trigger standards mode in modern browsers.

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Thats ok probably, pretty familiar and Dreamweaver kindly places something similar at the top of your html file when you go File > New.

HTML5 Doctype

Now for something beautiful. This is all you have to use for HTML5.

<!DOCTYPE html>

This is compliant to trigger standards mode in all modern browsers and will work in any browser.

I will be using this from now on.

The defence rests.