Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

What is the meaning of the DOCTYPE tag

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:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    

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