XHTML Compliancy

Posted: August 12th, 2009 | Author: Remi | Filed under: Programming, Site News | No Comments »

Just recently, I’ve gotten into making pages XHTML 1.0 Transitional compliant. What this means is that the coding of the webpage is fit to a more strict standard then just plain HTML. Practically speaking this means that the webpage fits into the web standards and will close guarantee that your webpage will display correctly on current and future web-standard compliant browsers. There are three types of XHTML, Transitional, Strict, and Frameset. Transitional is most widely used form of XHTML, and Strict is a version that is even more, well, strict. Making pages XHTML 1.0 Strict compliant can be difficult, but making it Transitional compliant isn’t hard at all. It is mainly a matter of cleaning up your existing HTML. I will cover how to make your webpage XHTML 1.0 Transitional compliant, as I have done with my site. But, don’t take my word, try clicking the button on the right that says “W3C XHTML 1.0″ and it will go to W3C’s (the organization that makes the web standard) xhtml/html validator. This is an extremely helpful tool, because it highlights the errors in your webpage that make it not xhtml compliant.

The first thing you must do is specify a doctype, here it is for transitional

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

Next comes the hmtl tag, but what you have to do in it is define the XML name space and the language as english

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

Now add the head tag, specify the page encoding, and add a title which is required in valid XHTML

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World!</title>

For the most part all of your XHTML Transitional pages should start that way. The next thing to do is just to take care of some pretty simple formatting rules. First off, all of your tags must be in lowercase, and this goes for your tag’s properties too, for example onClick is bad, it has to be onclick, and <P> has to be <p>. Next all your tags have to be closed, if you’re use to using single <p>  tags, you’ll have to do them in the self-closing style: <p />.  Script and style tags must contain a type, so like the following,

<script type="text/javascript"></script>, <style type="text/css"></style>

Also JavaScript not in an external file has to be escaped properly from the XHTML interpreter like follows:

<script type="javascript">
//<![CDATA[
alert("Hello");
//]]>
</script>

Image tags also, have to be closed but also they have to include the alt attribute, even if its just blank.

<img src="http://kunugiken.com/DRF/refresh.png" alt="" />

Another interesting thing to note is that when you declare your page as XHTML, is can break some of your CSS if it is not done correctly, one example would be the left property, for example the following will work in most browsers, but will not work on XHTML pages

position: absolute;
left: 40;

In actuality the left, top, right or bottom properties take a numerical value with a unit of measurement, so it has to be the following

position: absolute;
left: 40px;

Remember that this is also true if you’re setting the CSS from inside JavaScript.

I hope that you found this helpful, these are just some of the things that caught me up while converting my site to XHTML. Although it wasn’t so hard to make my blog part of the site proper XHTML because wordpress does a nice job of making XHTML compliant code anyway. (Although I had to mess with some of the plugins to get them to do it right). Check out W3School’s page on XHTML, and try taking their quiz! I hope you found XHTML at least interesting, and will consider converting your pages. Good Luck Everyone.

Leave a Reply