DevGuru XHTML Coding Rules and Syntax

XHTML CODING RULES AND SYNTAX

While these coding rules apply to XHTML, it is strongly recommended that you also follow these same rules when coding HTML.

All attributes, events, and tags must be written in lower case

In HTML it did not matter if you coded with a mixture of upper and lower case letters. In fact, many programmers typically coded HTML in upper case because they felt that it made the code more readable. Those days are over!

To be correct XHTML, you can only code attributes, events and tags in lower case. This is a requirement because we need our XHTML code to be compatible with XML, and XML is case sensitive (XML considers <HR /> and <hr /> to be different tags).

Wrong:
<A HREF="http://www.devguru.com" Target="_self">DevGuru</A>

Right:
<a href="http://www.devguru.com" target="_self">DevGuru</a>

All elements must be closed

In HTML we have many types of tags that need to be closed. The purpose of a close is to signify that the element stops at that point in the code. For example, consider using the a tag to create a link. The closing </a> tag is placed immediately after the link text. If you did not include the closing </a>, then the entire rest of the HTML document is considered to be part of the link text (as most programmers have discovered the hard way!).

In truth, HTML is very forgiving when it comes to closing tags. For example, most browsers will successfully display the following code.

<HTML>
Hello world!

In comparison, XHTML is absolutely NOT forgiving. In XHTML, all elements must be closed. (There is one exception, the DOCTYPE DTD element which is discussed below.) You open and close an element by using a pair of tags. The first tag opens the element. The second tag closes the element. In the closing tag, the tag name is preceded with a mandatory slash.

Here are some examples:
<table border="2">
<tr><td>
DevGuru is great!
</td></tr>
</table>

<ul>
<li> DevGuru is great! </li>
<li> XHTML rules! </li>
</ul>

Even tags like hr and br must be closed. You close this type of tag by putting a blank space after the tag name and then a slash. (The blank space is needed for maximum browser compatibilty.) Therefore, there is only one tag (i.e., no separate closing tag). Such tags are referred to as self-closing.

For example:
<br />
<hr />

The value assigned to an attribute must be enclosed in quotes

In truth, HTML does not require that a value assigned to an attribute be enclosed in quotes. However, XHTML is very strict about this. If you forget to enclose in quotes, then XHTML will completely ignore the attribute.

Wrong:
<table border=1 cellpadding=10 cellspacing=5>

Right:
<table border="1" cellpadding="10" cellspacing="5">

No attribute may be minimized

In HTML the following code is legal. Note that the Checked attribute is not assigned a value. This is called attribute minimization. This attribute will cause the radio button to be checked.

<INPUT Type=radio Name=Radix Value="16" Checked>hexidecimal

Having an attribute that does not have a value assigned to it is illegal in XHTML. In other words, no attribute minimization. The correct syntax is to assign "checked" as a value to checked. (In addition, we must also switch to all lower case, enclose values in quotes, and close the element to be correct XHTML.)

<input type="radio" name="Radix" value="16" checked="checked" />hexidecimal

All elements must be properly nested

Nested elements are contained inside of other elements. Here is an example of an unordered list element that contains nested elements.

<ul>
<li> XHTML </li>
<li> XML </li>
<li> XPATH </li>
<li> XSL </li>
<li> XSLT </li>
</ul>

Note how each li element is closed before you start the next li element. Further note the ul element is not closed until after all of the internal li elements have been closed.

In this next example, we bold and italicize the text DevGuru. We must close the i element before we close the b element.

Wrong:
<b><i>DevGuru</b></i>

Right:
<b><i>DevGuru</i></b>

XHTML documents must be well-formed

At a minimum, an XHTML document must contain html, head, title, and body elements. They must be properly nested and closed. (A frameset tag can be used in place of body.)

Here is a minimal XHTML document.

<html>
<head>
<title>DevGuru</title>
</head>
<body>
DevGuru is great!
</body>
</html>

There must be a DOCTYPE declaration

The DOCTYPE tag is used to declare the DTD (Document Type Definition) for an XHTML document. This tag is mandatory and must appear at the top (on the first line) of all XHTML code. If the DOCTYPE tag is not present, then it is not XHTML code.

See the DOCTYPE write-up for details.