|
You can prepare yourself for XHTML by starting
to write strict HTML.
How To Get Ready For XHTML
XHTML is not very different from HTML 4.01, so bringing your
code up to the 4.01 standard is a good start. Our complete
HTML 4.01 reference can help you with
that.
In addition, you should start NOW to write your HTML code in
lowercase letters, and NEVER make the bad habit of skipping end
tags like the </p>.
Happy coding!
The Most Important Differences:
- XHTML elements must be properly nested
- XHTML documents must be well-formed
- Tag names must be in lowercase
- All XHTML elements must be closed
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 in nested lists, is to forget
that the inside list must be within a li element, like this:
<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>
|
Notice that we have inserted a </li> tag after the </ul> tag
in the "correct" code example.
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:
<html>
<head> ... </head>
<body> ... </body>
</html>
|
Tag Names Must Be In Lower Case
This is because XHTML documents are XML applications. XML is
case-sensitive. Tags like <br> and <BR>
are interpreted as different tags.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
|
This is correct:
<body>
<p>This is a paragraph</p>
</body>
|
All XHTML Elements Must Be Closed
Non-empty elements must have an end tag.
This is wrong:
<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 either have an end tag or the start
tag must end with />.
This is wrong:
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
|
This is correct:
This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />
|
IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you
should add an extra space before the "/" symbol like this: <br
/>, and this: <hr />. |
