Category Archives: meaning of the DOCTYPE tag

what is the meaning of the DOCTYPE tag

Definition and Usage

HTML is a constantly changing language. With each step in its evolution, new tags and attributes and coined, while others are phased out or eliminated. Because of this, it’s necessary to specify at the very beginning of your page which version of HTML your code is using by setting the doctype.
The doctype declaration should be the very first thing in an HTML document, before the tag.
# 1 Use your text file or HTML editing software to open the web page you’re creating. You’ll need to place your cursor at the very beginning of the page.

# 2 Determine which doctype you need. A “Strict” document is defined as one containing elements that have not been “deprecated,” which means they have not been labeled obsolete and prone to being discontinued altogether. A “Transitional” document is defined as one that does include deprecated elements, but not frames. A “Frameset” document is defined as including everything a “Transitional” document may include, plus frames.

# 3 Type the following if your document is defined as “Strict”:

# 4 Input the following to define your document as “Transitional”:

# 5 Write to define your document as “Frameset.”

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.
Initially when web browsers appeared there were few documents standartizing the way HTML documents were displayed. So different browsers rendered the web pages in slightly different ways. However as the web technologies matured so did the technical documents describing visual rendering of web pages. Moreover new standards like the CSS standard appeared specifically aimed to describe the visual layout of HTML pages. So page rendering that was more or less correct according to the old specifications was regarded as incorrect under the new rules.

At some point in time it became obvious that if web browsers were to become compatible with each other, they had to start visualizing web pages in a standard way according to these new technical specifications. In other words all existing browsers had to change the way they displayed web pages. This would be great for the web designers creating new web pages because designers would be able to write a single HTML page and it would display in the same way on all browsers compatible with the new specifications. There would be no need to add workarounds for different quirks of different browsers – all browsers would display the same web page in the same way.

However this change of web page rendering would be a serious problem for existing pages the ones that had been created before the introduction of the new standards. Often these pages had been created in such a way that they had taken advantage of existing web browser quirks so removing these browser quirks would break rendering of these pages.

That is why browsers introduced several rendering modes for web pages: strict mode (also known as standards compliance mode), quirks mode and almost strict mode. New pages would be displayed in standards mode where all HTML markup is rendered in compliance with the CSS standard. And old pages would be rendered in quirks mode where the browser would exhibit all the quirks of the past browser versions, thus displaying these old pages like their web designers wanted them to display.

Now the only missing piece from our explanation is the “almost strict mode”.This mode is virtually identical to the regular “strict mode”, the only difference being that in “almost strict mode” images are rendered by default as block elements and in regular “strict mode” images are inline elements by default.

So the next question that arises is: How do web browsers decide if a given web page is old (and should be rendered in quirks mode) or new (and thus should use strict mode). The answer is the DOCTYPE switch (or its lack) at the beginning of the web page. Old pages have no idea about DOCTYPE so they never use the DOCTYPE switch. Thus the lack of this word at the beginning of the page tells the browser that this is an old page that should be rendered in quirks mode. If a DOCTYPE is present the web browser inspects it and based on the DOCTYPE value decides if the page should be rendered in strict, quirks or almost strict mode.

Different browsers interpret DOCTYPE values differently but here are some generic guidelines that are respected by most modern browsers:

* If there is no DOCTYPE keyword, then the page is rendered in quirks mode.
* If the DOCTYPE specifies a XHTML document (as opposed to an HTML one) the page is rendered in strict mode.
* If the DOCTYPE value is unknown to the browser, the page is rendered in strict mode.
* Other DOCTYPE values are rendered differently on different browsers. However if you want to render a page in strict mode, you can use the following DOCTYPE values which trigger strict mode on all modern browsers:

Here you can see detailed list of conditions and doctypes that trigger different rendering modes:

* Mozilla Firefox
* Internet Explorer
* Opera
* W3schools