Learn XHTML

Need help? If you find anything confusing, we can design your XHTML website pages for you. We will design XHTML website pages, upload them to your website via FTP, generate a Google site map, and submit it. This makes your website available to mobile users — added exposure! Cost: only $300 for a complete XHTML website, or $15 per page. Contact us for XHTML design. See an example of our fast loading XHTML website here.

XHTML and Tags

XHTML is the next generation of HTML. Today almost all browsers are compatible with XHTML. XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a good start.

You should start writing your HTML code in lowercase letters, and never skip end tags.

Most Important Differences

Elements Must Be Properly Nested

In HTML some elements can be improperly nested within each other like this:

Wrong:
<b> <i> Bold and italic text </b> </i>

In XHTML all elements must be properly nested within each other like this:

Correct:
<b> <i> Bold and italic text </i> </b>

A common mistake with nested lists is forgetting that the inside list must be within a <li> element:

<ul>
  <li>sugar</li>
  <li>Salt
    <ul>
      <li>Iodised Salt</li>
      <li>Free flow Salt</li>
    </ul>
  </li>
</ul>

Documents Must Be Well-Formed

All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements, which must be in pairs and correctly nested within their parent element. The basic document structure is:

<html>
  <head> ... </head>
  <body> ... </body>
</html>

Other tags like META, title and others have their own positions and should be placed at the correct location.

Tag Names Must Be In Lower Case

XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags.

Wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
Correct:
<body>
<p>This is a paragraph</p>
</body>

All XHTML Elements Must Be Closed

Non-empty elements must have an end tag.

Wrong:
<p>This is a paragraph
<p>This is another paragraph
Correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

Empty elements must either have an end tag or the start tag must end with />.

Wrong:
This is a Line break<br>
This is a horizontal rule:<hr>
This is an image <img src="ok.gif" alt="ok button">
Correct:
This is a horizontal rule:<hr />
This is an image <img src="ok.gif" alt="ok button" />

There are a few other compatibility issues to consider. For instance, you may need to add extra space in self-closing tags to make them XHTML-compliant, like the <br /> tag above.

Related Resources