Please visit our sponsors !
Differences Between XHTML and HTML
You can prepare yourself for XHTML by starting to write strict HTML.
How to Get Ready for XHTML
XHTML is the next generation of HTML, but it will of course take some time
before browsers and other software products are ready for it.
In the meantime there are some important things you can do to prepare
yourself for it. As you will learn from this tutorial, XHTML is not very different from
HTML 4.01, so bringing your code up to 4.01 standards is a very 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 an 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
/>.
Jump to: Top of Page
or HOME or
Printer friendly page
Search W3Schools:
What Others Say About Us
Does the world know about us? Check out these places:
Dogpile
Alta Vista
MSN
Google
Excite
Lycos
Yahoo
Ask Jeeves
We Help You For Free. You Can Help Us!
W3Schools is for training only. We do not warrant its correctness or its fitness for use.
The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our
terms of use and
privacy policy.
Copyright 1999-2002 by Refsnes Data. All Rights Reserved
|