10 Steps for Moving from HTML to XHTML
Let’s say you bit the bullet and followed the 5 Steps for Moving to Strict HTML 4.01. Now you have nice, clean HTML. But what if you’re not satisfied and you want to go all the way to strict XHTML? You want to have the cleanest, strictest markup possible!
Well, you’ve come to the right place! Here are the steps to move your mangy HTML doc into the pristine world of XHTML.
1) Add the Correct DOCTYPE
Add the strict XHTML DOCTYPE to the top of your page (replacing any other doctype):
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2) Add a namespace
XML documents (and therefore XHTML) require a namespace to define what they are and XHTML is no different
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
3) All tags and attribute names must be lowercase
In XML, this does not match <strong>look I’m bold</STRONG> because the beginning and ending tag is a different case.
So in xhtml it needs to look like this: <strong>I’m bold XHTML!</strong>
4) Documents must be well-formed
Any tag that you open, you must close even if there is only one tag. So <br> tags need to be turned into <br />. And tags cannot overlap so this is not allowed:
<strong>this is not <em></strong>right!</em>
5) Attributes must be quoted
Maybe in old-school HTML you could get away with this: <img src=coolgraphic.jpg>
But in the world of XHTML, you will need to do this: <img src=”coolgraphic” />
6) No Attribute minimization
In HTML you were allowed to do this: <input checked>
But XHTML requires that you spell out your attributes like so:
<input checked=”checked>
7) Encode ampersands
XML does not allow ampersands so they need to be encoded as &
8 ) CDATA around Javascript
You will need to escape out your javascript by encoding it in a <![CDATA[ like so:
<script type="text/javascript"> <![CDATA[ ... unescaped script content ... ]]> </script>A CDATA is just the XML way to ignore a piece of data.
9) Move from name to id
In XHTML the name attribute is formally depreciated in favor of the id attribute.
So this: <img name=”coolpic”>
Needs to become this: <img id=”coolpic” />
10) Validate!
Once you have turned your HTML into shiny XHTML, you can double-check that you did everything correctly by going to the W3C Validator: http://validator.w3.org/
And if you read all the way to the bottom, I’ll tell you a little secret. You don’t even need to do these steps by hand! You can use the magical HTML Tidy application to move your documents from HTML to XHTML.
