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. Recall these items from the previous 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" />

<img src="pic.gif" alt="">
becomes
<img src="pic.gif" alt="" />
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" />
Some elements have required attributes.
We've already seen:
- img tag requires alt attribute
- html tag requires xmlns attribute
The best way to check for these elements and attributes is via validation.

Previous: Document Type Definitions

Next: XHTML Conversion