Differences Between XHTML and HTML

By starting to write strict HTML, you can prepare for XHTML.

How to Prepare for XHTML

XHTML and HTML 4.01 standards are not very different.

So upgrading your code to 4.01 is a good start. Our complete <HTML 4.01 Reference Manualwill help you do this.

In addition, you should write HTML code in lowercase letters immediately, and never develop the bad habit of ignoring tags like </p>.

Wishing you a pleasant coding experience!

The main difference is:

  • XHTML elements must be nested correctly.
  • XHTML elements must be closed.
  • Tag names must be in lowercase letters.
  • An XHTML document must have a root element.

Elements must be nested correctly

In HTML, some elements can be incorrectly nested with each other, like this:

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

In XHTML, all elements must be nested correctly with each other, like this:

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

Tip:A common mistake in nested lists is to forget that the internal list must be within the li element, as shown below:

This is incorrect:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

This is correct:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Note: In the examples of correct code, we inserted a </li> tag after </ul>.

XHTML elements must be closed

Non-empty elements must be closed.

This is incorrect:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

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

Empty elements must also be closed

Empty elements must also be closed, or their start tags must be used with/>End.

This is incorrect:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML elements must be in lowercase

The XHTML specification defines: tag names and attribute values are case-sensitive.

This is incorrect:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

An XHTML document must have a root element

All XHTML elements must be nested within the <html> root element. All other elements may have child elements. Child elements must be paired and nested within their parent elements. The basic document structure is as follows:

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