Converting your site into XHTML 1.0

W3C defines XHTML as the latest version of HTML. The thought is that XHTML will replace HTML. Still a lot of people don't use it even though converting your site into XHTML isn't all that hard. If you want to keep up with the technology it's time to go XHTML and this tutorial will teach you how to.

Required elements
A XHTML document must have the following elements: Doctype, Head, Body and Title.
This is what your document should look like before you start adding your content and other codes.

<!DOCTYPE of your choice>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Content goes here.
</body>
</html>


The XHTML Doctypes
Like with the usual doctypes you can choose between Strict, Transitional and Frameset.

XHTML 1.0 Strict

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

XHTML 1.0 Transitional

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


XML Namespace
This is the namespace you should use.

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

Or this one if you want to specify the language of your site.

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


XHTML is case-sensitive and all code must be written in lowercase.

Wrong: <A HREF="WWW.WHIRLWIND.NU">www.whirlwind.nu</A>
Right: <a href="www.whirlwind.nu">www.whirlwind.nu</a>

Wrong: <table WIDTH="100px">
Right: <table width="100px">


All XHTML codes must be properly closed.

Wrong:
<p>This is incorrect
<p>Incorrect

Right:
<p>This is correct</p>
<p>Correct</p>

Even the empty ones. And don't forget the extra space before the /.

Wrong:
<br>
<hr>
<img src="your_picture_adress.jpg" alt="picture">

Right:
<br />
<hr />
<img src="your_picture_adress.jpg" alt="picture" />


XHTML elements must be properly nested and musn't overlap eachother.

Wrong: <u><i>This nesting is incorrect.</u></i>
Right: <u><i>This nesting is correct.</i></u>


Attribute values must be quoted.

Wrong: <table width=100px>
Right: <table width="100px">


Minimizing attributes is forbidden.

Wrong:
<input disabled>
<option selected>
<frame noresize>

Right:
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />


The Id attribute replaces the Name attribute.

Wrong: <img src="your_picture_adress.jpg" name="picture" />
Right: <img src="your_picture_adress.jpg" id="picture" />


The ampersand (&) character must not be used outside of entities or inside URLs.

Wrong: <p>Love & Hate</p>
Right: <p>Love &amp; Hate</p>

Wrong: <a href="index.php?page=love&hate=1">Love and Hate</a>
Right: <a href="index.php?page=love&amp;hate=1">Love and Hate</a>


Checklist
Hopefully after reading this you now have some understanding of how XHTML works. This means it's now time for you to convert your site to XHTML. These are the steps you should follow.

1. Add the correct Doctype and Namespace.

2. Make sure the document have the rest of the required elements: Html, Head, Title and Body.

3. Change all your codes to lower-case.

4. Close all codes properly.

5. Make sure everything is properly nested.

6. Make sure all attribute values are quoted and that they're not minimized.

7. Replace the Name attribute with the Id attribute.

8. Make sure the ampersand is typed out correctly.

9. Validate at http://validator.w3.org.