'Do modern browsers care about the DOCTYPE?

If you use deprecated attributes or tags <center>, <font color="red">, or <td valign="top"> etc. in XHTML 1.0 Strict (no depr. attributes), modern browsers (I will use Chrome as an example) still take notice of and use them.

If you use HTML5 <video> on an XHTML 1.0 Strict DOCTYPE Chrome will still recognize it - it's not as if they'd program it to not. I tested the worst deprecated, capitalized, and unquoted attribute code I could write, along with HTML5 audio, with the XHTML 1.0 Strict DOCTYPE in Chrome and it rendered flawlessly.

Here's the code I tested, working flawlessly in Chrome (red bg, centered table, audio playing):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Do browsers care about the DOCTYPE?</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body bgcolor=#ff0000>
 <CENTER>
  <table cellpadding="0" cellspacing=0>
   <tr><td valign=top>test</td></tr>
  </table>
 </CENTER>
 and some HTML5 audio..
 <audio autoplay>
  <source src="http://www.duncannz.com/resources/sound/alarm.mp3" type="audio/mp3">fallback text</audio>
</body>
</html>


So my question: Do modern browsers (translation: browsers other than IE) pay any attention at all, or do anything differently, because of the DOCTYPE? Do they even bother to read and interpret it?

htmldoctypew3c


Solution 1:[1]

Try this in Chrome:

<!DOCTYPE html>
<title>Test case</title>
<p hidden>My text
<table><tr><td>Hello World</table>

against this

<title>Test case</title>
<p hidden>My text
<table><tr><td>Hello World</table>

Only in the former case will the text "Hello World" be visible.

Solution 2:[2]

In most Modern Browsers, you're not going to notice much difference (depending on the page) when using different Doctypes. The biggest difference you'll notice is not in your markup, but in your use of CSS, and the layout/positioning of elements. The Doctype is used when validating your pages, and in determining the mode, the browser renders the page in. So, depending on the Doctype you use, it will determine if the page is rendered in Standards mode, Quirks mode, etc. In IE, and older browsers, you'll notice much more of a difference.

For a more in-depth information on the subject, check out this link: http://hsivonen.iki.fi/doctype/

Solution 3:[3]

Yes, they do. It means the difference between Quirks or Standard mode, and can affect how IE handles box containers.

Have a look here:
http://www.quirksmode.org/css/quirksmode.html

And also here:
http://www.webmasterworld.com/forum21/7975.htm They discuss this topic in detail.

Solution 4:[4]

maybe the paragraph called "How DOCTYPES Affect Rendering" could help you?

http://www.upsdell.com/BrowserNews/res_doctype.htm

Solution 5:[5]

At the current date it is still possible to use DTD entities as variables in chrome/firefox/opera/ie in .xml and .xhtml and .svg and other xml-based files(breaks in .html files as I imagine it uses an html rendered instead of an xml renderer) without having to resort to javascript or php/other server-side preprocessor magic:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [
<!ENTITY theword "bird">
<!ENTITY thexmlns "http://www.w3.org/1999/xhtml">
]>
<html xmlns="&thexmlns;">
  <head>
    <title>The word is &theword;</title>
  </head>
  <body>
    <p>This document uses the word &theword; multiple times.</p>
    <p>This document's word can be changed from &theword; by altering the entity.</p>
  </body>
</html>

This seems like a useful test to see if doctypes still work(save the example above as example.xml or example.xhtml and see if it works).

So far I only found a realistic use for it in android projects xml files to use entities inside attributes to prevent lines from having too much text one one line, or from having the repeated long text in multiple attributes that could have a short entity encode them instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alohci
Solution 2 radicalpi
Solution 3 Anriëtte Myburgh
Solution 4 gilles emmanuel
Solution 5

Related Questions