What is the functionality of !DOCTYPE?

StackOverflow https://stackoverflow.com/questions/1818587

  •  10-07-2019
  •  | 
  •  

Question

We often see <!DOCTYPE ...> as follows:

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

What's the functionality of !DOCTYPE?

Was it helpful?

Solution

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.

OTHER TIPS

It tells to the validator which version of HTML do are you using. A browser use this information to render the page correctly.

Here are correct version of DOCTYPE:

  • HTML 4.01 Strict, Transitional, Frameset

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

  • XHTML 1.0 Strict, Transitional, Frameset

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

  • XHTML 1.1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  • HTML5

    <!DOCTYPE html>

It tells your browser which version of HTML it is loading making the load time a bit quicker as the browser know what to expect.

The doctype is a standard defined by the w3c - when you hear about standards based web development this is what they are talking about. The idea of using the doctype is you create valid HTML that follows the doctype.

If you are clever you can actually write your own doctype.

The main (practical) purpose of DOCTYPEs is to force IE from "quirks mode" to "standards-compliant mode", both euphemisms for "horribly broken mode" and "slightly broken mode" (respectively).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top