Whats the point of DOCTYPE?

Question

I know that different doctypes are essentially about how compliant the html is, but what difference does it make what doctype you specify? Do browsers handle the same code differently depending on the doctype? Thanks

UPDATE - most answers mention quirks mode can be set off if no doctype is specified. But what would be the different between xhtml and html 4.01?

Answer 1

The biggest thing is having a doctype or not. If you don't, the browser will work in a "quirks" mode rather than standards mode and many things will be slightly different. If you have one — any — that typically activates more standards-compliant behavior in the browser.

See this article for the details of what doctypes do on various different browsers and what modes — quirks, standards, almost-standards, etc. — different browsers have. Quoting a relevant section:

Modes for text/html Content

The choice of the mode for text/html content depends on doctype sniffing (discussed later in this document). In IE8 and IE9, the mode also depends on other factors. However, by default even in IE8 and IE9, the mode depends on the doctype for non-intranet sites that are not on a blacklist supplied by Microsoft.

It cannot be stressed enough that the exact behavior of the modes varies from browser to browser even though discussion in this document has been unified.

Quirks Mode

In the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7, 8 and 9, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.

If you are authoring new pages now, you are supposed to comply with the relevant specifications (CSS 2.1 in particular) and use the Standards mode.

Standards Mode

In the Standards mode the browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser.

Since different browsers are at different stages of compliance, the Standards mode isn’t a single target, either.

HTML 5 calls this mode the “no quirks mode”.

Almost Standards Mode

Firefox, Safari, Chrome, Opera (since 7.5), IE8 and IE9 also have a mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. Mac IE 5, Windows IE 6 and 7, Opera prior to 7.5 and Konqueror do not need an Almost Standards mode, because they don’t implement the vertical sizing of table cells rigorously according to the CSS2 specification in their respective Standards modes anyway. In fact, their Standards modes are closer to the Almost Standards mode than to the Standards mode of newer browsers.

HTML 5 calls this mode the “limited quirks mode”.

IE7 Mode

IE8 and IE9 have a mode that is mostly a frozen copy of the mode that was the Standards mode in IE7. Other browsers do not have a mode like this, and this mode is not specified by HTML5.

IE8 Standards Mode

IE9 has a mode that is mostly a frozen copy of the mode that was the Standards mode in IE8. Other browsers do not have a mode like this, and this mode is not specified by HTML5.

IE8 Almost Standards Mode

IE9 has a mode that is mostly a frozen copy of the mode that was the Almost Standards mode in IE8. Other browsers do not have a mode like this, and this mode is not specified by HTML5.

...but see the article for a full discussion.