What does <!doctype html> do?

html doctype

41,059

Solution 1

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.

Solution 2

DOCTYPE Declaration is the abbreviation for Document Type Declaration (DTD).

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.

If the web page coding does not include a DOCTYPE Declaration (DTD or Document Type Declaration) or it is done incorrectly:

You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validation requires the DOCTYPE declaration.
The browser rendering the webpage will process the coding in Quirks Mode.
The stylesheet may not be implemented as planned.

Which DOCTYPE should you use?

If you are a beginner to HTML (HyperText Markup Language) then I would suggest you use the HTML 4.01 Transitional declaration. It is much more forgiving for the beginner when performing HTML validation. You would also use this declaration if you know that your audience will not have a browser that supports CSS (Cascading Style Sheets).

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

This DOCTYPE declaration still allows elements and presentation attributes that should be in the stylesheet.

If you want to learn to code in preparation for the future but still not ready for XHTML then you would use the Strict declaration.

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

With this declaration all presentation attributes are moved to the stylesheet.

A complete list of DOCTYPE Declarations (DTDs) is available at List of valid DTDs you can use in your document.

Solution 3

The doctype declaration should be the very first thing in an HTML document, before the tag.

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.

Quote from here: http://www.w3schools.com/tags/tag_doctype.asp

Solution 4

A Doctype declaration triggers standards mode in your browser and should always be used. Quirks mode should always be avoided.

Solution 5

Browser war and two modes

To understand the significance of DOCTYPE, let us dig into some history starting from the days of browser wars. During those days web pages were written in two different versions to support both Internet Explorer and Netscape Navigator.

But then W3C took over defining Web standards. But sadly, browsers with new standards were not able to render web pages built for legacy browsers. So, to support the website built for legacy browsers quirks mode was introduced. In which the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

To differentiate those website from the new ones, DOCTYPE was added, which gave the browser a signal that this web page should be rendered in standards mode.

HTML5 and HTML 4.01

Prior to HTML5, the HTML was SGML-based which required a document type definition (DTD) to establish rules and grammar for markup. Thus, doctype had other information about the document type definition (DTD).

However, with introduction of HTML5 the DOCTYPE is the only thing needed to enable the standards mode.

View more solutions

41,059

Author by

Niklas Rosencrantz

I'm as simple as possible but not any simpler.

Updated on July 09, 2022

Comments

Niklas Rosencrantz almost 2 years

What does this tag do?

<!doctype html>

I can see that with this tag on top, my HTML behaves in another way than without.

How do I know if I need this tag?
RylandAlmanza over 12 years

Basically, it just tells the browser how to render your document. You should always use this at the top of your html document.
cHao over 12 years

-0.49 for quoting w3schools. It'd be nice if you could find a reference less known to be full of crap.
Niklas Rosencrantz over 12 years

Thank you for the answer. Thing is if use it, it makes a space between table cells.
Niklas Rosencrantz over 12 years

Thank you for the answer. Using the tag changes my layout. I wonder why.
Alohci over 12 years

@NiklasR - If your problem is spaces between table cells, you probably want to read this: Images, Tables, and Mysterious Gaps
zzzzBov over 12 years

@NiklasR, i thought you were saying it didn't change the layout. I must have misread your question. Using the doctype tells the browser that it needs to be rendered according to the spec, rather than quirksmode.
Niklas Rosencrantz over 12 years

I found having the tag introduced spaces between table cells and between new lines. You answered the question, I decided to use to tag and I found how to make the gaps disappear by using a stylesheet elemet. You may have a look at the project if you like (combining images from table cells that should have no gaps between'em) apps.facebook.com/cyberfaze Thank you
zzzzBov over 12 years

@NiklasR, don't use tables for layout.
Niklas Rosencrantz over 12 years

Thank you for the comment. An alternative to tables is CSS and in this case a gif animation has to exactly join the edge of a non-animated gif. I don't know how to do it join GIF:s with CSS and it might be beyong the scope of the question.
Ankur Loriya almost 11 years

I like your seatbelt example... :)
Fraggy about 9 years

Love the seatbelt example! Classic!
d512 about 8 years

This is kind of a non-answer. If somebody asked me what a seat belt was for and told them some nonsense about HTML doctypes they'd probably be as confused as I am right now.
zzzzBov about 8 years

@user1334007, it's a metaphor, and it was added as supplementary information. If you feel that there is a better answer to this question, I would encourage you to add your own.
Aditya Singh almost 8 years

The seatbelt example is great :)