- Posted by lio on October 5, 2008
You can prepare yourself for XHTML by starting to write strict HTML.
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>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.
XHTML Elements Must Always 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:
|
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 Lower Case
The XHTML specification defines that the tag names and attributes need to be lower case.
This is wrong:
|
<BODY> <P>This is a paragraph</P> </BODY>
|
This is correct:
|
<body> <p>This is a paragraph</p> </body>
|
XHTML Documents Must Have One Root Element
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>
|