Why Do I Need a Doctype? (What Does It Do)

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 do we need a html tag if we have !DOCTYPE html ?

On the semantic level...

<!DOCTYPE html> and <html>, despite both containing < angle brackets >, are fundamentally different things:

<!DOCTYPE html> declares the document type and is not parsed to any DOM elements. To quote MDN's Doctype article, "Its sole purpose is to prevent a browser from switching into so-called "quirks mode" when rendering a document".
<html>, however, does parse to a DOM element. You can attach attributes to it or manipulate it with JavaScript. For example, try pasting this in your browser console: document.querySelector('html').style.opacity = '0.5'. You can do that with <html>, but not with DOCTYPE.

On the spec level...

Why have any standards at all? Standards are necessary so that implementers (e.g. browser vendors) know what they need to build, and developers know what they're developing against. Without common standards, it'd be impossible to ever build interoperable software.

You can certainly question the logic of why standards were set the way they were set, and the answer almost ends up at "because history" (and sometimes "because politics"). If those historical decisions were changed now, it'd break the Web.

On the markup level...

It's best practice to always set a lang attribute on the HTML element, for accessibility and SEO reasons, and you need to include it in order to do that:

Always use a language attribute on the html tag to declare the default language of the text in the page.

It's also a general best practice when writing code or markup to be explicit with what you intend, to help others reading your work. For that reason alone, it's clearer to add a surrounding HTML tag.

On the DOM level...

If you don't include any attributes on the HTML element, it doesn't actually matter what you write in terms of how it's parsed, because HTML is quite forgiving) (credit @Run_Script for the link). It'll get parsed out to the relevant DOM nodes anyway, so document.body.parentElement instanceof HTMLHtmlElement will always be true.

Still, for the reasons laid out above, I'd recommend always including it.

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.

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)

Necessary for the URL in html DOCTYPE?

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

but add the <!DOCTYPE> declaration to your HTML documents, so that
the browser knows what type of document to expect.

Like as follows :
<!Doctype html>

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

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

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

Doctype html - do you need an html tag after it?

In any HTML version other than XHTML versions, the <html> tag is not needed and does not have any effect as such. However, the tag is useful for specifying the main language of the content of the entire document, e.g. <html lang="en">.

In XHTML, the tag is always required and must have the xmlns attribute as in the example. (It may additionally have other attributes.) The tag is required, because the html element is present in any XHTML document, and XHTML never allows start tag omission. The attribute is required because a specific XHTML rule says so.

This has nothing to do with the doctype issue. Using <!DOCTYPE html> is nowadays common and often seen as “the HTML5 doctype”. The above still applies, since HTML5 has two alternative syntaxes, the HTML syntax and the XHTML syntax.

Why Do I Need a Doctype? (What Does It Do)