★Introducing XHTML
XHTML stands for eXtensible HyperText Markup Language. Once you know what is HTML, XHTML is basically a sticter and cleaner version of HTML. This means that there are more 'rules' to follow when coding XHTML as compared to HTML.
XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000 and it is defined as the latest version of HTML. XHTML will gradually replace HTML. In a way, XHTML is more desirable because it results in a more correct and properly written document.
★HTML vs XHTML
Here are the significant differences between HTML and XHTML:
1. XHTML elements must be properly nested.
In HTML, you may write this (improper nesting):
<div id="text"><b>my text goes here.</div></b>
On the other hand, in XHTML, you have to place your codes in the right order:
<div id="text"><b>my text goes here.</b></div>
2. XHTML elements must be in lowercase.
HTML is not case-sensitive, so you can write in upper or lowercase and the browser will still be able to read it. This, however, is incorrect in XHTML:
<HTML>
<HEAD>
.....
</HEAD>
</HTML>
<HEAD>
.....
</HEAD>
</HTML>
On the other hand, in XHTML, everything must be in lowercase. Hence the correct way of writing should be:
<html>
<head>
.....
</head>
</html>
<head>
.....
</head>
</html>
3. Every element must be properly closed.
The following is wrong in XHTML:
<p>blah blah blah.
<p>blah blah blah.
<p>blah blah blah.
The correct way of writing should be:
<p>blah blah blah.</p>
<p>blah blah blah.</p>
<p>blah blah blah.</p>
4. Elements that are empty must be closed.
In HTML, you see this:
<img src="picture.gif" alt="My Picture">
line one...<br>
line two...<br>
line one...<br>
line two...<br>
The above is considered wrong in XHTML. The correct way of writing should be:
<img src="picture.gif" alt="My Picture" />
line one...<br />
line two...<br />
line one...<br />
line two...<br />
5. XHTML documents must have a root element.
In XHTML, all elements must be properly nested within the <html> root element. Hence your source should start with <html> and end with </html>. Elements within the root element can have child or sub elements that must be open and closed properly. Here's an example:
<html>
<head>
<p>Paragraph One.</p>
<p>Paragraph Two.</p>
</head>
</html>
<head>
<p>Paragraph One.</p>
<p>Paragraph Two.</p>
</head>
</html>
