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 declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

Answer 2

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.

Answer 3

The doctype declaration should be the first thing in an HTML document, before the tag.

It isn't an HTML tag; it's an instruction to the web browser about what version of the markup language the page is written in.

It's getting simpler with HTML5: <!DOCTYPE html>

If you don't have that proper doctype, the browser won't know to use HTML5.

Answer 4

It's all about the standards and yes, browsers handles code differently. That means, that all browsers should display the page equally. If no standard is specified, browser will interpret the page as it wants.

Answer 5

Because Doctype is the flag to tell how the browser should handle the page.

For example :

HTML5 need this doctype<!DOCTYPE html> If you remove this from the page, the any HTML5 capabilities inside your page won't be activated.

You can read more in http://www.w3.org/QA/Tips/Doctype

Answer 6

Browser Modes

Back in the past, Browsers implemented CSS to their own rules.
Only over the years have Browser now adapted the W3C standards.

To make sure that websites rendered correctly various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.

Therefore, when standards compliancy became important browser vendors faced a tough choice. Moving closer to the W3C specifications was the way to go, but if they’d just change the CSS implementations to match the standards perfectly, many websites would break to a greater or lesser extent. Existing CSS would start to show odd side effects if it were suddenly interpreted in the correct way.

So moving closer to standards compliance would cause problems. On the other hand, not moving closer to standards compliance would perpetuate the general confusion of the Browser Wars Era.

To this end all Browser had to start supporting both modes. Quirks mode for older designs and standard mode for new design.

Paraphrased from here: Quirks mode and strict mode

DocTypes

Choosing which mode to use requires a trigger, and this trigger was found in ’doctype switching’. According to the standards, any (X)HTML document should have a doctype which tells the world at large which flavour of (X)HTML the document is using.

Taken from here too: Quirks mode and strict mode

Additonal Resources

• Document Type Declaration
• Quirks Mode on Wikipedia
• Quirks mode and strict mode
• Internet Explorer box model bug
• The CSS box model