Switching From HTML To XHTML

Guest Author - Diane Cipollo

You've heard about XHTML and how it is the markup language of the future. Are you ready to convert your webpages from HTML to XHTML but you don't know where to start? Don't worry, it's easy. Read on.

XHTML is less flexible than HTML. Most web browsers will display a webpage coded in HTML even though there may be some small discrepancy in the code. However, XHTML is stricter and therefore you need to follow a few guidelines.

When you use more than one tag together, this is called nested tags. You must open and close nested tags in the same order. For example, you might want to make a section of text both bold and italic.

<b><i>Text goes here</i></b> Correct

<b><i>Text goes here</b></i> Incorrect
XHTML is case-sensitive which means that BR is not equal to br.
You should code XHTML element and attribute names in lowercase characters.

<b></b> Correct

<B> </B> Incorrect
Some HTML tags do not require a closing tag because they are optional and most browsers will still display your webpage with or without these optional tags. A common example is the opening <p> tag without the optional closing </p> tag. However, in XHTML you must remember to use these optional closing tags. <p> </p>
Some elements in HTML are empty tags because the opening tag does not have a matching closing tag such as the <br> and <img> tag. When using these tags that do not have a matching closing tag, you must add a space and backslash /.

<br />
You should always enclose attribute values within quotation marks when coding XHTML.

width=100 Incorrect

width="100" Correct
When adding CSS style or script code to your HTML webpages, you were taught to add the HTML comment tags to enclose the code section. This was done to hide the code from older browsers. Do not use this comment code in XHTML webpages. You will use the CDATA code instead.

<style type="text/css">

</style> Incorrect

<style type="text/css">
<![CDATA[
-----
]]>
</style> Correct
Some HTML attributes are stand alone attributes because they do not have a matching value. An example of this is the checked attribute for the input tag. When using stand alone attributes in XHTML, you will need to set the attribute equal to itself.

Incorrect
<input type="checkbox" name="sex"
value="female" checked>

Correct
<input type="checkbox" name="sex"
value="female" checked="checked">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.
The doctype DTD tag (document type declaration) is optional for HTML webpages. However, you must include one of the DTD above the <html> tag in your XHTML webpages. You can find more information about DTD here.
Finally, you need to include the XML namespace in the <html> tag in your XHTML webpages.

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

</html>