Home  |  FAQs  |  Contact

Rules of XHTML

Moving from traditional HTML to XHTML 1.0 Transitional is easy, as long as you work carefully and observe the following rules:

Open with the proper DOCTYPE & Namespace: XHTML documents must begin with tags that tell the browser how to interpret them. We begin each template page with the following that appears before the opening head <head> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Documents must be well-formed: This means that all elements must have closing tags and must be correctly nested. For example overlapping tags may work in most browsers but are NOT allowed in XHTML.

<b><i>This is incorrect</b></i>
<b><i>This IS correct.</i></b>

All element and attribute names must be lower case: XML is case-sensitive so because XHTML is an application of XHTML it is important that all elements and attributes are lower case! You can no longer have <H2> or <P>, it must be <h2> and <p>.

Non-empty elements must have a closing tag: In HTML some elements were not required to have closing tags. For example a paragraph <p> would be closed by the next paragraph to follow, but in XHTML you are required to close all elements so <p> would be closed by </p>.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Empty Elements must also be closed: Where previously we could use <br> or <hr> or <input type="text"> we now need to close these elements with />. So the examples shown become <br/>, <hr/> and <input type="text"/> BUT in order to be backward compatible we add an extra space, so currently you should use: <br />, <hr /> and <input type="text" />.

Attribute values must always be quoted: For example <img alt="Photo 2" src="images/photo2.jpg" width=”100” height=”75” /> is correct but <img alt="Photo 2" src="images/photo2.jpg" width=100 height=75 />is incorrect.

Script and Style elements: Where previously you had

<style type="text/css">
<!--
-->
</style>

you now would have the following:

<style type="text/css">
/*<![CDATA[*/
<!--
-->
/*]]>*/
</style>

This can be a problem for most current browsers, as they do not like the CDATA block. For now, the best solution is to call any JavaScript and CSS from an external file. For example:

<script language="JavaScript" type="text/javascript" src="main.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />