XHTML, A Better, Cleaner HTML

Category: HTML
Reviewed by: Chiggins   
Reviewed on: Dec 06 2007
» Discuss this topic (0 Posts)

XHTML is based off of the HTML 4.01 standard. XHTML must:

  • Be properly nested
  • Be in lowercase
  • Have ending tag (some exceptions)
  • Have one root element

Being Properly Nested

<b><a href=”http://www.google.com”>Google</b></a>

The above piece of coding is incorrect because it is incorrectly nested. As you can notice, at first, the <b> tag comes before the <a> tag, but at the end it ends with the <b> tag first and the <a> tag last. It should look like:

 
<b><a href=”http://www.google.com”>Google</a></b>

As you can see, the first tag ends last, the second tag ends second to last, and so on.

<b><h1><a href=”http://www.google.com”>Google</a></h1></b>

Being In Lowercase

This “rule” is pretty straight forward. All of your tags and attributes must be lowercase.

Incorrect:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
<DIV ALIGN-“CENTER”><B>This is not accepted</B></DIV>
</BODY>
</HTML>
Correct:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div align=”center”><b>This is accepted</b></div>
</body>
</html>

Having Ending Tags

One of the most common errors in web coding is having ending tags. Now with XHTML, this is fixed.

 
<html>
 
<head>
<title>Page title
 
<body>
 
<table>
<tr>
<td>
This is incorrect coding
</tr>
</table>
 
</html>
 
<html>
 
<head>
<title>Page title</title>
</head>
 
<body>
 
<table>
<tr>
<td>
This is correct coding
</td>
</tr>
</table>
 
</body>
 
</html>

Now, sometimes you might be using the <img> tag, or the <hr> tag. They don’t have ending tags, so what do you do? The tag must end with />.

 
Incorrect formatting:
<img src=”thingy.gif” title=”Thingy”>
<br>
<hr>
 
Correct formatting:
<img src=”thingy.gif” title=”Thingy” />
 
<hr />

Having Root Elements

This one is also easy. Each tag must have its own “parent” tag.

 
<html>
<head> … </head>
<body> … </body>
</html>
Forums
Latest Articles