Differences Between XHTML And HTML;
--------------------------------------------------------------------------------
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:
HTML Code:
<b><i>This text is bold and italic</b></i>
In XHTML all elements must be properly nested within each other like this:
HTML Code:
<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 an li element, like this:
HTML Code:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
This is correct:
HTML Code:
<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 Code:
<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:
HTML Code:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
HTML Code:
<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:
HTML Code:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
HTML Code:
<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:
HTML Code:
This is a break<br>
Here comes a horizontal rule:
HTML Code:
Here's an image <img src="happy.gif" alt="Happy face">
This is correct:
HTML Code:
This is a break<br />
Here comes a horizontal rule:
HTML Code:
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 />.
Linear Mode
