XHTML

What is XHTML? Well if you already know HTML 4.0, you are 99% there. If you don't know HTML, the W3C can explain.

XHTML for HTML users (the last 1%)

Four Rules To Follow

1. XHTML is case sensitive, use lower case
2. Always close container tags
3. Always use a trailing slash in empty tags
4. Do not have any nesting errors

Once you master the list above, you now know XHTML! Let's go through each one so you understand.

Rule #1 - XHTML is case sensitive, use lower case

When you write HTML you do not need to worry about upper or lower case letters in your tags. XHTML is an XML application. What that means is that since XML is a case sensitive markup language, all languages defined in XML such as XHTML must also be case sensitive.

For example <P> is a common tag used in HTML. The P element is used in a tag to open a paragraph. Since XHTML is case sensitive and all the tags (elements and attributes) are lowercase, the XHTML equivalent is <p>. Here are some more examples:

Notice that the elements P, H1, FORM, and IMG all must be lower case. Notice also that the attributes ALIGN, ACTION, METHOD, and SOURCE must also be in lower case. But what is important to notice is that the attribute values do not need to be lower case. For example "Logo.gif" is an attribute value that does not need to be lower case to be recognized. But beware, some operating systems are case-sensitive. If your Web server is running on Linux or UNIX (like Sun Solaris), the file name "Logo.gif" must match exactly the file name on the system. Some Web servers, like Apache, are case sensitive even if they are running on Windows which is not.

Rule #2 - Always close container tags

A container tag is a tag that has contents. Examples of container tags are <B>, <H1>, <LI>, <TD>, <FORM>, and <P>. Each of these tags contains information to be "marked up". The B element marks its contents bold, the H1 element marks its contents as a top level heading, the LI contains a list item, the TD contains a table cell data, the FORM contains a form, and the P contains a paragraph. You must close all of your container tags.

An empty paragraph should look like this <p>&nbsp;</p> not <P>.

It is common practice to not close certain container tags. In fact, many closing tags are optional. The following elements have optional closing tags in HTML 4.0: P, LI, TD, TR. The W3C has a nice alphabetical chart of tag element names with a column for optional closing tags. It is OK to not close these tags in HTML but you must always close them in XHTML.

Rule #3 - Always use a trailing slash in empty tags

An empty tag is a tag that has no contents. Examples of empty tags are <BR>, <HR>, <IMG>, and <INPUT>. Each of these tags contains no information to be "marked up". The BR element marks a line break, the HR element marks a horizontal rule, the IMG inserts an image, and the INPUT inserts a form input control. You must include a trailing slash on empty tags.

A line break should look like this <br /> not <BR>. Here are more examples:

As you can see from the table above, it is important to mark your empty tags with a trailing slash before the closing angle bracket ">".

Rule #4 - Do not have any nesting errors

Nesting errors occur when you don't close your tags in the reverse order that they were opened. You don't want two elements to overlap. For example:

should be:

Make sure you always follow the four rules above. For more information, the W3C has a few guidelines to follow when writing XHTML that is compatible with existing HTML browsers.