You know, I’ll always prefer HTML over XHTML because it’s much less verbose and I like to keep things simple. True story.
But that didn’t stop me from wondering how exactly one triggers HTML5’s XML mode — let’s call it XHTML5 from now on. As it turns out, there are three easy steps to convert your HTML5 documents to XHTML5.
Use the correct MIME type
You’re not really using XHTML5 until you’re serving your documents with the corresponding MIME type. For XML, this is
application/xhtml+xml. You can easily do this by configuring your web server, or by using a server-side scripting language. Here’s an example in PHP:
<?php header('Content-Type: application/xhtml+xml;charset=UTF-8'); ?>
Note that documents served with this MIME type won’t render in IE8 and older versions. Instead, they’ll trigger a download popup. (There is a workaround that allows you to send them as
application/xml instead, but why bother when you could just use HTML?)
Use the correct DOCTYPE — or don’t use it at all
The DOCTYPE declaration, which can be written as
<!doctype html> in ‘regular’ HTML5, can be omitted in XHTML5. If you insist on using it, however, you should know ‘DOCTYPE’ is supposed to be written in uppercase in XML mode, like this:
Note that if you don’t uppercase
DOCTYPE, the XML parser returns a syntax error.
The second part can be written in lowercase (
html), uppercase (
HTML) or even mixed case (
hTmL) — it still works. However, to conform to the Polyglot Markup Guidelines for HTML-Compatible XHTML Documents, it should be written in lowercase.
Specify the XML namespace
XHTML5 requires you to add an XML namespace to the root element of the document, which in this case is of course the
Putting it all together
That’s all there is to it. You can view an example XHTML5 document. This is pretty much what the source code looks like:
<meta charset="utf-8" />
<title>Example XHTML5 document</title>
<!-- HERE BE DRAGONS -->
Remember, the document must be served as
application/xhtml+xml to trigger HTML5 in XML serialization mode. The DOCTYPE declaration is optional in XML mode, but if you don’t want to omit it, it needs to be uppercase.
Of course, you’ll have to use valid XHTML syntax for your document to work. This means you won’t be able to use
document.write(). Also, a single syntax error is enough to cause a Yellow Screen of Death instead of the page you wanted to display. Use with caution!
Better yet, never ever use XHTML unless you have a very good reason to do so! There’s no added value, and it only complicates things. When in doubt, use regular HTML5.