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.yuki-onna.co.uk" Title= "My Page" >The Ice Cavern</A>
Right: <a href="http://www.yuki-onna.co.uk" title="My Page">The Ice Cavern</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.
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:
The Ice Cavern!
<li>Is your code XHTML compliant?</li>
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.
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>
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" />
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.
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 The Ice Cavern. We must close the i element before we close the b element.
Wrong: <b><i>The Ice Cavern</b></i>
Right: <b><i>The Ice Cavern</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.
Some words, pictures etc.
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.
XHTML 1.0 Strict, Transitional, Frameset
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">