True XHTML ... Migrating to XML (beta)

Table of Contents

XHTML and XML vs. HTML

Contrary to popular belief, XHTML is not strict HTML. The main difference between XHTML and HTML is that XHTML was technically written in XML. XML was meant as a structural language, with CSS is meant for formatting and beautification.

To put things into perspective, SGML is the mother of markup languages, having been written first. XML and HTML are two implementations of SGML that, until XHTML, often went in separate directions. Both languages use SGML syntax; that is to say, they both use angle brackets to indicate tags, equals signs (=) to indicate attributes, and so forth. The advantage of XML is that it can be customized to suit the needs of the coder.

Most people who code with XHTML know that it uses XML syntax, which is more strict than that of HTML. What most people don't realize, however, is that their code is probably interpreted by the browser as HTML and not XML.

Should I Code in XHTML?

Is XML the future of the Web? Probably. Specifications like SVG and MathML are growing in popularity and allow the webmaster to have significantly more control over a webpage's markup and enable businesses and users alike to accomplish more than they thought was possible with the Web.

Since XHTML was meant for XML, if you are not planning on using the XML component of XHTML, like most web authors, I don't see the advantage of using XHTML against using HTML. If it's the professionalism of stricter syntax you want, you can always validate your codeExternal Link against the HTML 4.01 Strict specification. HTML is not likely to be dropped from future Web browsers because so much of the Web is interpreted by the browser as HTML (my guess is that less than 1% of today's Web is rendered as XML).

To be fair, I should mention that XHTML 1.0External Link allow code to be rendered as HTML if it uses the content-type of text/html. However, this is not the case for XHTML 1.1External Link or the upcoming XHTML 2.0External Link specification. Also, many experts say that rendering XHTML code as HTML can break supports in strictly-HTML user agentsExternal Link.

So, suppose you want to make the leap. Where do you start?

Step One: XML Declaration

In order to have the browser interpret your code as XML, you must declare to your browser that you are using XML. The XML declaration must be the first line of code in your document.

XML Declaration:
<?xml version="1.0"?>

If you want to skip a <meta> tag later on, you can specify the character encoding here as well. I use ISO Western European encoding, but you can choose any encoding you like (utf-8 is another popular encoding).

XML Declaration with Encoding:
<?xml version="1.0" encoding="iso-8859-1"?>

PHP USERS: The server will arrive at an error when it reaches this code because it believes that the code between <? and ?> is PHP. To fix this, use PHP to print the XML declaration.

Step Two: Pick a Document Type Declaration

XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use this if you want to use lovely things like link targets.

XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

If you feel really geeky, you can use XHTML 1.0 Strict. It's the least lenient of any XHTML 1.0 DTD.

XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

If you use frames, use this DTD. On second thought, if you use frames, don't use frames.

XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

This update to XHTML 1.0 Strict removed even more markup. I usually stick with 1.0, but I'll leave that to your personal preference.

XHTML 2.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

XHTML 2.0 is still in draft form. At this point, I would strongly recommend against migrating all your websites to XHTML 2.0 until you've done significant testing with it and you understand its pros and cons and its "moods."

Step Three: Change The MIME Type

Though one would think the XML declaration we made in Step One should tell the browser to render the code as XML, it doesn't usually, so we will manually change the MIME type from text/html to application/xhtml+xml. This is usually accomplished using a server-side language. Place one of the following before your XML declaration, depending on whether you use ASP or PHP:

ASP:
<% response.ContentType="application/xhtml+xml" %>
PHP:
<? header("Content-type: application/xhtml+xml"); ?>

If you don't use a server-side language, rename your file with a .xhtml extension and add this to your .htaccess file:

Apache .htaccess file:
AddType application/xhtml+xml;charset=iso-8859-1;qs=0.999 .xhtml

Note that no versions of Internet Explorer, not even Internet Explorer 7, support the MIME type application/xhtml+xml, so if you want to render your code as XML in Internet Explorer, use text/xml instead.

ASP:
<% response.ContentType="text/xml" %>
PHP:
<? header("Content-type: text/xml"); ?>
Apache .htaccess file:
AddType text/xml;charset=iso-8859-1;qs=0.999 .xhtml

Step Four: Hack

Some things that work beautifully in HTML don't work as well in XML, so here are some of the hacks you can use to make your code behave.

  • Centering divs. In HTML, it is possible to center <div> sections using the CSS rule margin: 0 auto. When rendering as XML, Internet Explorer no longer respects this CSS, rule, so an alternative approach is to position the div at 50% and use a negative margin of half the div's width. (For more information, click here for some examples.)
  • Background. Setting the background color or background image of your webpage is different in XML than HTML, because <body> in XML is only as big as its contents. Thus, to change the background color or image of the entire webpage, you must apply the background to the entire document. To support both compliant and non-compliant browsers, use the following method:
CSS:
html, body {
   background-color: #333;
}

Going Beyond

If you want you can link stylesheets using the following code between your XML declaration and your DTD:

XML Stylesheet:
<?xml-stylesheet type="text/css" href="http://example.com/style.css"?>

Most browsers don't support this syntax, however, and the <link> syntax will likely work even in XHTML 2.0.

Further instruction on XML may require use of XSLT, which is beyond the scope of this tutorial.

Thanks for reading this article! If you have any feedback, please contact me.