HTML to XHTML conversion
Need to convert your HTML pages up to the latest XHTML 1.0 standard? Here's the fast track way to do it!
Before you can convert to XHTML, you need to make sure your current HTML page validates to the HTML4 standard.
Your pages must contain a !DOCTYPE definition to validate correctly. If you're not sure which !DOCTYPE you should have,
To validate each page:
Type your page's URL into the W3C's validator, click the validate button and wait for the results (it's pretty fast). If there are any error's, fix them and submit again, correcting errors each time until it passes validation.
Note:- Bookmark the validator page as you'll be using it again later, to validate your XHTML (it does both HTML and XHTML!).
With your now validated HTML4 page, follow the simple sequence below to achieve XHTML superstardom! er.. conformity.
[1] Add the following XML version declaration at the top of the file:
<?xml version="1.0" encoding="iso-8859-1"?>
[2] Alter the HTML !DOCTYPE to now identify the file as an XHTML 1.0 web page.
For example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[3] Declare the default namespace.
Do this by modifying the <HTML> tag at the top of the document to read:
<HTML xmlns="http://www.w3.org/1999/xhtml">
[4] Change all your tag and attribute names to lowercase.
********** event handlers should follow this rule too e.g. onmouseover, NOT onMouseover.
[5] Enclose your attribute values in single or double quotes
Example, border="0" or border='0', not border=0.
[6] Tags without closing tags (eg. img, br, hr, input, and meta) should be 'closed' with a space-slash ( /) at the end.
Example, ****** name="description" content="Page description" />
The space before the slash is important. If it is not there, the page may render incorrectly in older browsers
[7] Non empty elements require an end tag
Example, <p>More Options</p>. With HTML, the closing paragraph tags were not important. XHTML won't validate without them though
[8] Elements can nest but make sure they don't overlap
<strong>this code is <u>correct</u></strong> whereas <i>this code is <u>NOT correct</i></u>
[9] Remove all redundant white spaces from tags
<p class= "small"> is not allowed, whereas <p class="small"> is correct.
[10] Embed your scripts and styles in external files
Apart from making the site file structure 'simpler to maintain', this also removes the need for XML CDATA sections (no really, don't ask!).
[11] Make sure your attribute value pairs are not minimised
HTML allowed you to write <option .. selected>, XHTML needs this to be<option .. selected="selected">
[12] Use both "id" and "name" in in-page anchor tags
Example:- <a id="summary" name="summary"></a>
That's it! Now submit it to the W3C HTML Validator again to make sure you haven't missed anything.
For a comprehensive list of 'rules' see the www.w3.org XHTML guidelines
