What Is 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">

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.

!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)

What is the DOCTYPE... for

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype 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.

take a look here: http://www.w3schools.com/tags/tag_doctype.asp

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

Why is DOCTYPE declaration not a HTML element or HTML tag?

Because it doesn't need to be a tag. It's almost a redundancy for the .html file extension. It just tells the browser the type of document that it is receiving.

Would it be considered as valid HTML code though?

To make your code valid, it is required (not all of the time in preset environments), if that is your question.

However, there are self-closing tags that do not delimit any text content as an element either, which led me to be a bit confused and ask here.

These are elements that carry information in their attributes (such as input, img, etc). The DOCTYPE declaration has no attributes (aside from the type of HTML) and thus, does not need to be an HTML tag or element.

There are some other reasons that go into DOM parsing which you can read about in this question if you're interested.

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.