What Are the Different Doctypes in HTML and What Do They Mean

What are the different doctypes in html and what do they mean?

Traditionally, a Doctype, or Document Type Declaration associates the document with a Document Type Definition.

The Document Type Definition is a standard for a specific XML or SGML document. XML and SGML themselves doesn't have much of a schema or a very specific set of rules aside from how tags and attributes work in general. You can think of a DTD a description of the rules for a particular kind of document (like HTML, SVG or MathML). They say what tags are allowed where (e.g. that an html element must contain exactly one head element followed by exactly one body element).

There are alternatives to DTDs such as XML Schemas that are more commonly used today.

Browsers, however, do not use DTDs at all. They read the Doctype to determine the rendering mode, but the rules for parsing the document are entirely baked into the browser.

This is why HTML 5 has a Doctype (to determine the rendering mode) but not DTD.

Rendering Modes

Early web browsers were very buggy. When new versions were released they had to maintain compatibility with their predecessors and rivals. This made it very hard to fix bugs because websites were built that depended on them.

To resolve this, modern browsers have different rendering modes (standards mode, for rendering your document and css according to standards, and quirks mode, wherein the browser emulates the bugs of earlier browsers, and almost standards mode which sits between the two).

Choosing a Doctype

There are two factors to consider when selecting a Doctype:

Does it trigger standards mode? (For new pages it should, times when you need to be compatible with browsers which don't support standards mode are very rare today).
Does it support the features I need?

Generally this means you should use HTML 5. It is the current standard and best reflects how browsers actually work:

<!DOCTYPE html>

Failing that. Strict doctypes avoid most features that should be handled with CSS.

When writing in XHTML 1.0, this Doctype is common:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

More obsolete features are available via:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

When writing in HTML 4.01, this one is common instead:

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

With the obsolete features being in

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

and

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

Note that most of the above have variations (e.g. you can omit the URL and rely on the public identifier) which have implications for the support of standards mode. This article includes an extensive list.

Debate on Strict versus Transitional Doctypes

(Note that the following is much, must less true in 2021 than it was in 2008)

Standards evangelists have called for web developers to stop using the Transitional Doctype on new pages and instead use Strict. Again, this is a case where the theory and the practice have some difficulties being reconciled. The original hope of the transitional Doctype was to provide a halfway house for transitioning legacy websites toward standards-compliance. With transitional doctypes, the restriction on elements and attributes is literally "less strict", so developers would be able to get their work running under standards mode sooner, and phase out the outstanding differences over time.

Controversy exists because it isn't always quite so simple for a developer change the Doctype in an enterprise environment. Freelance developers and makers of small- or medium- sized websites may often have an easier time determining their Doctype and making this transition. In an enterprise production environment for a highly-demanded web-based service, there are inherently more complicated dependencies on legacy systems and 3rd party code products, which themselves may be on a roadmap for removal or redesign, but the execution of such changes must be done methodically and incrementally.

Helpful Tools

The W3C (World Wide Web Consortium) is a group which plays an active role in defining these kinds of standards. They maintain a helpful online tool at http://validator.w3.org/ for verifying and validating documents against their standards. There are many other 3rd party tools and browser extensions with similar functionality.

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

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

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

DocType Definitions?

Browsers don't care what the Doctype is beyond it being a Magic String that triggers Standards Mode, Almost Standards Mode or Quirks mode.

You should use the correct Doctype so that you can use a validator as a useful QA tool instead of one that throws up lots of errors because you write XHTML with an HTML Doctype.

What Are the Different Doctypes in HTML and What Do They Mean