How to Convert Your Website to XHTML
*A few things about XHTML 1.0 Strict: Don't use <div align="center">, don't use background tag (use CSS instead)
Before starting this little tutorial you should understand HTML, and have a website (made using HTML),
which validates as HTML 4.01 Transitional. If you don't, you aren't quite ready for this tutorial,
so you should work on getting there. First of all, I'll explain what XHTML really is.
XHTML is supposed to eventually replace HTML, so it is really just a new version of HTML. Converting to XHTML does require
some patience, but it isn't really very hard. You will be glad you took the time
to convert it now rather than waiting. It is a bit more demanding, and you may have to experiment a
bit if you want to keep everything that you have now on your website, but it is always good
to have the latest version. XHTML is supposed to add some of the aspects of XML into HTML, hence the
name. The goal is to make a more organized version of HTML.
Since your website validated as HTML 4.01,
you should already have a "doctype". The first step, of course, is to change that doctype to the one
for XHTML 1.0. So, replace your current doctype (the part above <html>) with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is telling the browser not to view it as HTML, but as XHTML. The next step is to add the following
line to the head section of your document (I tend to put it just below the title portion, but as far
as I know, anywhere in the head works just as well): <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>.
Now that you have set up your first page to be read as XHTML, you should convert the actual code.
With XHTML, EVERY tag must be closed (excepting only the doctype). Things like the break and image
codes, which HTML requires no closing tags for, you now must close. That brings up the obvious
question of how to do that. I'll use the image code as an example (by the way, you now must always include
an alt code for images). Normally, your coding would be something like <img src="something.gif">, but since now you have to close all tags,
you can no longer use that. Instead, after the main code (before the last bracket), you would add a space, a slash, and then the bracket, so it would look like
this: <img src="something.gif" />. With meta tags, however, you wouldn't have the space before the slash, but it is the same idea. The same thing
goes for the break code (with the space), so now it should look like <br />. Another important thing is that all codes must be in lowercase letters,
which for me wasn't a big problem since I usually did that anyway, but make sure to look for that as well. Attribute values must also be inside of
quotes, which, again, was not a problem for me. All this means is that instead of something like <body background=bla.gif>, you would instead have
<body background="bla.gif">. I think I've covered everything, but if I've missed anything please let me know so that I can change it.
The last thing you should do is to validate your code. I like to use the validator at W3.org, but there are a ton
to choose from, so if you don't like that one you can find one that you like better. You should continue to do this with all of the pages of your website.
Let me know if you have any problems.
© Copyright 2006-8 by Charlotte Dye except where noted.