One of the great misconceptions of the last 10 years of web development is XHTML. Initially welcomed as a way to make HTML easier to produce and parse using standard XML parsers, it never really was used the way it should have been. Countless websites are still using it today, with web developers unaware that the browser really doesn’t see it as XHTML in the first place.
As a web developer, it’s easy to understand that if you don’t properly mark your HTML output with the proper DOCTYPE, browsers will deviate from their default behavior in applying CSS and turn to what is called “Quirks Mode”. It’s mere mention makes devs shiver as they’re still haunted by the memory of browser incompatibilities and the labor it required to at least make them look good on all platforms. Today’s web development is all about standards compliance and the current generation of browsers (IE8, FF3, Safari & Chrome) go to great lengths to make the development experience a lot cleaner than it was 5 years ago when IE6 was spoiling the fun. Knowing that the failure to properly provide such a DOCTYPE will turn your precious web design into a horrible mess that might have slipped through QA a few years ago, but just isn’t going to cut it anymore. But what is the proper DOCTYPE?
The short answer? it’s <!DOCTYPE html>. The long answer? Read on.
Now that HTML5 is on the horizon it’s time for everyone to take a look at how it solves problems that used to keep devs up at night. One of these problems is the DOCTYPE. A lot of devs are unaware that the default DOCTYPE added to a newly created Web Project in Visual Studio 2008 is set to the following:
| ASP.NET |
1
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Visual Studio 2010 doesn’t do much better:
| ASP.NET |
1
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
That wouldn’t be such a bad DOCTYPE if it wasn’t for the fact that it’s pretty meaningless if the content is served by the web server to the client as text/html. You see, the browser isn’t going to use this DOCTYPE to determine that the whole thing should be parsed (and validated) as XHTML. It uses the Content-type header in the HTTP response for that. So what happens is that this DOCTYPE is simply going to avoid most browsers to go in to the dreaded Quicks Mode (except for Konqueror, but who cares, right?) but most browsers won’t use “standards mode” either. This has been described before, and there’s a lot of reading material out there that covers the pitfalls.
To actually use XHTML on the client, your web server needs to serve content as application/xhtml+xml, and none of the clients will try to render that in Quirks Mode, but then the developer is faced with the problem that if the served content does not validate, the user is presented with a not-so-nice XML validation error message and none of the content will be visible.
But most of the tools out there (Visual Studio included) will happily generate XHTML since that’s easy to parse and work with as well. Which is why countless devs (yours truly included) one day figured out that the following didn’t work:
| ASP.NET |
1
|
<script type=”text/javascript” src=”…” />
|
Why not? Because there’s no closing tag. Script elements need their closing tag, and HTML parsers don’t support self-closing tags (which are different from tags that don’t need closing, like <BR> and <IMG>). It will happily ignore the invalid slash before the closing bracket, but will then determine there’s no script at all to parse and just ignore the whole element. It will work, however, if your server serves this as application/xhtml+xml, and also if the html is loaded from the file system without a server (using the file:// protocol) since the browser has no choice but to check the content to determine what it is.
W3C solved all this by giving up on XHTML2 and instead focusing on how to make HTML5 compatible with both. So when you apply the “standard” HTML 5 DOCTYPE, which is simply
| ASP.NET |
1
|
<!DOCTYPE html>
|
Most browsers (with the notable exception of Netscape 6) will use the standards mode and expose as much compliance as they can.