What Is the Functionality of !Doctype

What is the functionality of !DOCTYPE?

The most significant use of DOCTYPE is to switch a browser between Quirks Mode and Standards Mode rendering.

This functionality came about because of the "broken" rendering in old versions of IE. It was realised that if Microsoft just "fixed" the IE rendering engine lots of existing sites would not render properly. So the way it works is if you put any valid DOCTYPE declaration at all in your page the assumption is that you know what you're doing and your browser will render in a standards compliant way, and if you don't put one in it will render in the old "wrong" way.

This was originally done in IE for the Mac, but this behaviour is the same in all versions of IE since IE5, and Firefox, Chrome, Safari and Opera.

What the DOCTYPE is supposed to be is a Document Type Definition. HTML is subset of SGML (as is XML). The DTD tells a parser which syntax you are using. So in a webpage your DOCTYPE should match the version of HTML you are using.

Whats the point of DOCTYPE?

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.

Why do I need a doctype? (What does it do)

All browsers need the doctype. Without the DOCTYPE you are forcing the browsers to render in Quirks Mode.

However, DOCTYPE was only partially used by the browsers in determining dialect and parsing, even though that was the purpose. This is why HTML5 has reduced the DOCTYPE to simply:

<!DOCTYPE html>

2.2. The DOCTYPE

The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]

The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

Source: HTML5 differences from HTML4: DOCTYPE

What is DOCTYPE?

Basically, the DOCTYPE describes the HTML that will be used in your page.

Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect one can trigger quirks mode.

The kicker here is, that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers); meaning that you'll have a much harder job, trying to ensure your page renders consistently with all browsers if the quirks mode is triggered, than you will if it is rendered in standards mode.

Wikipedia has a more in-depth summary of the differences in rendering when using various DOCTYPEs. XHTML is enabled by certain DOCTYPEs, and there is quite a bit of debate about the use of XHTML which is covered well in XHTML — myths and reality.

There are subtle differences between different "standards compliant" rendering DOCTYPEs, such as the HTML5 DOCTYPE (<!DOCTYPE html>, prior to HTML5, only known as the "skinny doctype" which does not trigger standardized rendering in older browsers) and other DOCTYPEs such as this one for HTML 4.01 transitional:

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

What does !doctype html do?

It's an integral part of HTML as defined in the specification:

8.1.1 The DOCTYPE
A DOCTYPE is a required preamble.
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

Edit to add:

What does this seatbelt do?
What I can see is that, with this seatbelt on, my car behaves the same way as without. How do I know if I need this seatbelt?

You wont know if you'll need it until something goes wrong and you don't have it.

!DOCTYPE html What does it mean?

<!DOCTYPE html> is the explicit Document Type Declaration.

From the linked page:

The DOCTYPE Declaration (DTD or Document Type Declaration) does a couple of things:

When performing HTML validation testing on a web page it tells the HTML (HyperText Markup Language) validator which version of (X)HTML standard the web page coding is supposed to comply with. When you validate your web page the HTML validator checks the coding against the applicable standard then reports which portions of the coding do not pass HTML validation (are not compliant).

It tells the browser how to render the page in standards compliant mode.

#2 is a very important reason for using it.

<!DOCTYPE html>, specifically, is the correct declaration for HTML5, and should be used pretty much from here to the near future. You can still use legacy strings or obsolete permitted strings, but the previously written format is all that is required in HTML5. On a further note, this DTD will cause all modern browsers ~~dead link~~ to switch to their standards (compliance) mode, even if they don't support HTML5.

Here's some more info:

Activating Browser Modes with Doctype & Choosing a Doctype (same page)

World Wide Web Consortium (they make web standards)

Why and how to use !DOCTYPE ?

W3C has a pretty good answer to this at http://www.w3.org/QA/Tips/Doctype

Why?

Why specify a doctype? Because it defines which version of (X)HTML
your document is actually using, and this is a critical piece of
information needed by some tools processing the document.

For example, specifying the doctype of your document allows you to use
tools such as the Markup Validator to check the syntax of your
(X)HTML. Such tools won't be able to work if they do not know what
kind of document you are using.

But the most important thing is that with most families of browsers, a
doctype declaration will make a lot of guessing unnecessary, and will
thus trigger a "standard" rendering mode.

Basically if you leave it out, the browser will try and guess what rendering mode to use, and it might cause some unexpected results.

What Is the Functionality of !Doctype