XHTML Syntax Rules

The Most Important Differences:

XHTML documents must be well-formed
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
(doctype)
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title> ... </title>
      ...
   </head>
   <body> ... </body>
</html>

Notice the (doctype) and the "xmlns" attribute on the opening html tag. You should also include a character set meta tag in the <head> element. These items will be discussed on the next page.
XHTML elements must be properly nested
Wrong:
<p>here is an emphasized <em>paragraph.</p></em>

Right:
<p>here is an emphasized <em>paragraph.</em></p>
Tag names must be in lowercase. XML is case-sensitive.
Wrong:
<PRE>Some preformatted text.</PRE>

Right:
<pre>Some preformatted text.</pre>
Attribute names must also be in lowercase.

Wrong:
<a HREF="http://www.example.com">

Right:
<a href="http://www.example.com">
All elements must be closed
This includes elements that traditionally do not contain any content, such as images, form inputs, meta tags, etc.
Wrong:
<p>Here is a paragraph.
<p>Here is another paragraph.

Right:
<p>Here is a paragraph.</p>
<p>Here is another paragraph.</p>

Elements with no closing tag must also be closed with a slash inside the tag:

<br> becomes <br />
<hr> becomes <hr />
<input type="text"> becomes <input type="text" />
Attribute values must be quoted

Wrong:
<a href=http://www.example.com>example link</a>

Right:
<a href="http://www.example.com">example link</a>
Attribute minimization is forbidden
Wrong:
<input type="checkbox" checked />

Right:
<input type="checkbox" checked="checked" />
All image tags must have "alt" attributes.
Wrong:
<img src="kitten.jpg" />

Right:
<img src="kitten.jpg" alt="an evil kitten" />
The "id" attribute and the "name" attribute-
Eventually, element ids (which must be unique within a document) will replace element names. For now, it is recommended to use both to ensure backward compatibility--for example, many form fields are accessed by their names. Ids are also used by cascading style sheets and various scripting languages.
<img src="kitty.jpg" name="kittypic" alt="an evil kitten" />

<img src="kitty.jpg" name="kittypic" alt="an evil kitten" id="kittypic" />
The XHTML DTD defines mandatory elements
DTDs (Document Type Definitions) will be covered next.

Previous: Introduction to XHTML

Next: Document Type Definitions