Tips for switching to valid XHTML1.1

Posted in work with tags , , , .

Apr 13, 08

Comments

Trackback

Since the web is waiting for the XHTML2 standard, we can notice that the trend of web page markup is heading to the pure XML direction. Though XHTML2 might need a long time to be published, we should be prepared. What shall we do now? Switching to XHTML1.1 now would be the best practice since:

  1. It’s pure XML, which is similar to XHTML2.
  2. It is supported by current common browsers.

Using XHTML1.1 will let you be familiar with pure XML, and makes it much easier to change to XHTML2 in the future.

I decided to switch to XHTML1.1 (from XHTML1.0 traditional) today. While cleaning up my web pages, I found some tips which might be helpful for web you developers:

Doctype declare:

This is the first thing to do. Add following line in the very beginning of your file:

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

This will let browsers know it’s in XHTML1.1 format.

Also, because XHTML1.1 should be transmitted with MIME type application/xhtml+xml, a meta tag should be added in <head>:

<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=utf-8" />

No lang attribute

“lang” attribute in tags is not supported in XHTML1.1. Instead, you should use “xml:lang” attribute. A example:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

This defines language of the whole document as English(en).

Other changes from XHTML1.0 strict can be found here: http://www.w3.org/TR/xhtml11/changes.html#a_changes

Adding CDATA in scripts

Some java scripts may break validation result of your web page. A very common example is Google Analytics javascript code. Modify your Google analytics code will make it passing W3C validation:

<!--Google Analytics-->
<script type="text/javascript">
//<!--[CDATA[
var gaJsHost = ( ("https:" == document.location.protocol) ?
    "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost +
    "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
//]]-->
</script>
<script type="text/javascript">
//<!--[CDATA[
var pageTracker = _gat._getTracker("UA-????????");
pageTracker._initData();
pageTracker._trackPageview();
//]]-->
</script>
<!--End of Google Analytics-->

File name matters

Traditionally, it does not matter if you name web pages with .hml/.html. But if you still use them as postfix of XHTML1.1 web pages, your server most probably send it withMIME type text/html while XHTML1.1 should be application/xhtml+xml. Does this matter? W3C validator warning message says:

Using a wrong media type for a certain document type may confuse the validator and other user agents with respect to the nature of the document, and you may get some erroneous validation errors.

I tried with my webserver(FreeBSD+Apache), it will send right mime type if file name ends with .xhtml. Otherwise W3C validator will generate a warning message. But unfortunately my server won’t recognize index.xhtml as default page. So be sure to check this issue on your server. Otherwise your front page might be broken.

Although I would like to suggest everyone to drop his IE6, it’s disappointing for web developers to see that IE6 is still widely used. And IE6 has problem with MIME typeapplication/xhtml+xml as described here. This might cause problem under some conditions – especially when you change file postfix to .xhtml. So it seems to be a hard decision to make on file names – although it’s easy for me: I abandon users under IE6!

Setting MIME type

Setting MIME type in dynamic language is easy. Here is a script in PHP1:

header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
header("Content-Type: application/xhtml+xml; charset=utf-8");
else
header("Content-Type: text/html; charset=utf-8");

This script will check with user agent to see if it accept application/xhtml+xml, thus it’s safe to use.

  1. It’s from here [↩]

3 Responses to “Tips for switching to valid XHTML1.1”

  1. @Apr 21, 08

    Luke

    The code block will brake sidebar under IE6.
    This problem have to be fixed ASAP

  2. @Apr 21, 08

    Lukewarm » Blog Archive » Google code prettify

    [...] to all <pre> units and then render it by Google code prettify. It works just fantastic! Check this example out! No [...]

  3. @Oct 8, 08

    Recent Links Tagged With "xhtml2" - JabberTags

    [...] public links >> xhtml2 Tips for switching to valid XHTML1.1 Saved by chaserpaul on Mon 06-10-2008 Accesskey problems remain in XHTML 2 Saved by tomwoolley on [...]


Reply