DOCTYPE tag

The DOCTYPE element is an optional element at the start of an HTML page that tells the browser what syntax to expect in the HTML that follows.

DOCTYPE is optional in modern browsers and very old browsers (IE5 or NS4, or earlier) don't recognise it all. If you leave it out your page will still get displayed and the browser will make its best guess at how to deal with the HTML Tags in the document. Often though, that means the browser will be thrown into "quirks mode". In quirks mode, the browser will try its darndest to render the tags regardless of any particular standard for HTML, including dealing with non-standard tags or tags specific to a particular browser version.

In quirks mode, browsers are very forgiving. The bad news is that often means that they will go their own sweet way and your page can end up displaying differently in different browsers. In particular, Internet Explorer in quirks mode renders the CSS box model differently from the way described in the CSS standards. Design your page layout for standards and it will end up misaligned in Internet Explorer quirks mode. Or design it for Internet Explorer quirks mode and it will screw up in other browsers.

Another problem is that in quirks mode, font values are not inherited into tables, so your table text ends up looking different from the rest of your document.

So, unless your page layout is very simple and fluid you want standards mode every time - you need a DOCTYPE.

There are a few different doctypes around: HTML4, xhtml 1.1, strict or transitional and so on. They can be quite long: difficult to remember and difficult to type. See below.

But nowadays you only need one DOCTYPE to get your document out of quirks mode:

 <!DOCTYPE html> 

Simple, isn't it? Especially when you compare it to the other doctypes below. In fact it is the doctype for HTML 5. So how come it works in browsers created before HTML 5 support began? Because modern browsers are written to deal with unknown doctypes. They assume a  doctype they don't know about is not necessarily invalid and to be on the safe side, don't subside into quirks mode.

Note that HTML 5, which aims to simplify things, is not a subset of XML. That means, unlike xhtml, tags do not need to be valid XML*. If you want, attributes don't have to be quoted and name don't have to be lower case: SRC=image.png is just as valid as src="image.png". You may feel this makes your source code messy but at least your pages don't become invalid just because some quirky code has been pasted in from an advertiser or widget site. And you can still write valid XML if you want.

*Your web pages are almost certainly served with a MIME type of text/html. If they are being served as application/xml or application/xhtml+xml, then you must have a doctype for xhtml.

Older DOCTYPEs

Here's a list of doctypes taken from the World Wide Web Consortium's Quality Assurance Recommendations:

HTML 4.01

Strict

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

Transitional

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

Frameset

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

XHTML 1.0

Strict (quick reference)

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

Transitional

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

 Frameset

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

XHTML 1.1 - DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.1 (quick reference):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

HTML 5 (W3C Working Draft)

<!DOCTYPE HTML>