Untitled 1

Introduction to XHTML

A. 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

B: XHTML Elements Must Be Properly Nested

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

This text is bold and italic

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

This text is bold and italic

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>Ice Cream</li>
<li>Frozen Yogurt
 <ul>
 <li>Strawberry Frozen Yogurt</li>
 <li>Vanilla Frozen Yogurt</li>
 </ul>
<li>Toppings</li>
</ul>

This is correct:

<ul>
<li>Ice Cream</li>
<li>Frozen Yogurt
 <ul>
 <li>Strawberry Frozen Yogurt</li>
 <li>Vanilla Frozen Yogurt</li>
 </ul>
</li>
<li>Toppings</li>
</ul>

Notice </li> tag after the </ul> tag in the "correct" code example.

C: XHTML Elements Must Always Be Closed

Non-empty elements must have a closing tag.

This is wrong:

Welcome to Ron's Store
Please buy more stuff!

This is correct:

Welcome to Ron's Store
Please buy more stuff!

D: Empty Elements Must Also Be Closed

Use self-closing tags for <hr>, etc.

This is wrong:

A break:
A horizontal rule: <hr>
An image: <img src="mountains.gif" alt="Mountains face">

This is correct:

A break:
A horizontal rule: <hr />
An image: <img src="mountains.gif" alt="Mountains face" />

E: XHTML Elements Must Be In Lower Case

Tag names and attributes must be in lower case.

This is wrong:

<BODY>
Welcome to Ron's Store
</BODY>

This is correct:

<body>
Welcome to Ron's Store
</body>

F: 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: