Home arrow HTML arrow Page 2 - XHTML Explained

XHTML Explained

I'm sure you've heard people mumbling about XHTML and how it combines HTML and XML to create the "next generation" of HTML. I too had heard the mumbling, but actually had no idea what XHTML was... up until about 2 months ago. In this article, Mitchell gives us a quick run down of what XHTML is, some of its benefits, how it can be used, and what it looks like. He wraps up the article with a couple of XHTML examples.

Author Info:
By: Mitchell Harper
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
December 29, 2001
  1. · XHTML Explained
  2. · XHTML Defined
  3. · XHTML Benefits
  4. · DTD's
  5. · XHTML Examples
  6. · Conclusion

print this article

XHTML Explained - XHTML Defined
(Page 2 of 6 )

XHTML is HTML "reformulated" to conform to the current Extensible Markup Language (XML) standard, version 1.0. Imagine taking the best parts from the HTML language and mixing them with all of the great aspects of XMLÖ then youíre coming close to imagining the power and flexibility of XHTML.

XHTML has much stricter language syntax that HTML, however. To create fully valid XHTML documents, they must adhere to these rules/guidelines:

All tags must be closed

With normal HTML documents, some browsers will still render the contents of a <table> even if you donít close the table with a </table> tag. This allows developers to become lazy and forgetful. The tags within an XHTML document must always be nested correctly and closed properly.

If we have the following HTML 4.0 compliant table:

<table width="100%">



<p><b>Welcome to my page




... you can see straight away that the <p>, <b>, and <hr> tags arenít closed. This is a big no-no for XHTML documents and will raise a parser error, because all tags must be closed (yes, even the <p> tag).

The XHTML 1.0 compliant version of the table shown above looks like this:

<table width="100%">



<p><b>Welcome to my page</b></p>




Notice how the <p>, <b>, and <hr> tags are now closed? To close tags like <hr>, we can simply add a space and forward-slash within the tag, like this: <hr />.

Attributes must contain quoted values

All tag attributes, such as <p align="center"> must be enclosed within double quotes. You no longer have the choice of either single or double quotes. Also, for attributes which have no value, or arenít quoted such as

<option checked>1</option>

... you must assign a value to that attribute (even though it wont be used), and surround it in double quotes, for example:

<option checked="checked">1</option>

All element and attribute names must also be lower case.

Be careful with special characters

Because of the way XHTML documents are validated and must conform to specific rules, HTML comments like this:

<!-- This is a comment -->

... as well as inline style sheets and inline JavaScript should always be removed from your XHTML document. You should store them in separate .css and .js files respectively, and reference them like this:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

... for style sheets, or

<script language="JavaScript" src="mystuff.js"></script>

... for JavaScript files.

If you're using other HTML characters such as <, > and & in attribute values, for example, then they should be replaced with their corresponding HTML entity representations such as "<", ">" and "&" respectively.

Last but not least, instead of giving tags such as <input>, <select>, and <form> a value for the "name" attribute, you should use the "id" attribute instead. In XHTML documents, the "name" attribute is rendered useless, and belongs back with HTML 4.0.
blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials