Differences Between XHTML And HTML

« Previous Chapter Next Chapter »

Get Ready For XHTML

XHTML is not very different from the HTML 4.01 standard.

So, bringing your code up to the 4.01 standard is a good start.

In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip closing tags (like </p>).

The Most Important Differences:

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Elements Must Be Properly Nested

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

<b><i>This text is bold and italic</b></i>

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

<b><i>This text is bold and italic</i></b>

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.

This is wrong:

<ul>
  <li>Earth</li>
  <li>tea
    <ul>
      <li>World1</li>
      <li>World2</li>
    </ul>
  <li>Elephant</li>
</ul>

This is correct:

<ul>
  <li>Earth</li>
  <li>tea
    <ul>
      <li>World1</li>
      <li>World2</li>
    </ul>
  </li>
  <li>Elephant</li>
</ul>

Note: we have inserted a </li> tag after the </ul> tag in the "correct" code example.

XHTML Elements Must Always Be Closed

Non-empty elements must have a closing tag.

This is wrong:

<p>A paragraph
<p>This is another paragraph

This is correct:

<p>A paragraph</p>
<p>This is another paragraph</p>


Empty Elements Must Also Be Closed

Empty elements must also be closed.

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src="../../images/ok1.png" alt="Its Ok">

This is correct:

A break: <br />
A horizontal rule: <hr />
An image: <img src="../../images/ok1.png" alt="Its Ok" />


XHTML Elements Must Be In Lower Case

Tag names and attributes must be in lower case.

This is wrong:

<BODY>
<P>A paragraph</P>
</BODY>

This is correct:

<body>
<p>A paragraph</p>
</body>


XHTML Documents Must Have One Root Element

All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.

The basic document structure is:

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

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!