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" />
Learn More:
Our CSS positioned templates (any many of our table-based ones, too) use XHTML rather than HTML coding. You may be familiar with HTML, the web’s original markup language, but the W3C currently recommends using XHTML instead. This hybrid language looks and works much like HTML but is based on XML, the web’s “super” markup language. XHTML requires a more “logical” document structure. When writing your text for the web, think about logically setting up your content.
<h1>Your Main Topic Heading</h1>
<p>Content that follows your main topic.</p>
<h2>Second Topic Heading</h2>
<p>Content that follows the second topic heading</p>
You want to avoid using deprecated tags to add text to simulate the logical order like <font size="7">Your large text</font>.
If you’re concerned about the appearance of your web pages, remember that Cascading Style Sheets (CSS) separate presentation from structure, allowing you to style any element as you wish.
Hot Tip:
FrontPage 2003 will clean up most your coding automatically. Switch to code view then right-click on an empty space on the page. From the menu, select “Apply XML formatting rules”.
Miscellaneous Items of Note:
FrontPage2003 will automatically add a border value when you insert an image:
<img border="0" src="images/photos/photo3.jpg" />
This value will not validate, so you need to remove the border from the code. (This attribute should be in the CSS file instead.)
<img src="images/photos/
photo3.jpg" />
You may also be used to setting a link so that it opens in a new browser window by setting a “target”:
<a target="_blank" href="http://www.
rtbwizards.com/new/faqs.asp">Visit our FAQs.</a>
This value will not validate. Think about whether you really need to force this on your visitors. Anyone who has been on the computer for even a few short hours will have learned how to use the browser’s back button.