When XML was first introduced, there was a lot of hype about all the benefits it was going to provide web developers. XML hasn't really caught on yet with most developers, however, because it requires a substantial effort to convert existing HTML pages over to XML. If you're looking to upgrade your HTML pages, though, there is an easier solution that will provide many of the benefits that XML does: XHTML.
In this tutorial, I will give a basic overview of the steps you need to take to convert your existing HTML pages to XHTML. XHTML's best feature is that it truly standardizes HTML coding -- allowing your HTML pages to appear more consistent across different browsers, and speed up display times. XHTML does not provide the same level of granular control that XML does, but it is still a very good compromise between HTML and XML.
(1) Required Tags
All XHTML pages require HTML tags, HEAD tags, TITLE tags (within the head tags) and BODY tags. While browsers will allow HTML pages to get away with some of these tags missing, this is not allowed in XHTML. So every XHTML page must have this basic outline:
|
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
|
(2) The Doctype Tag
In the first line of any XHTML page, you should declare a Doctype that the browser can use to validate your XHTML. The doctype tag is not an XHTML tag, so it does not need to be closed with a "/". There are three types of Doctypes (strict, transitional and frameset) you can use for XHTML, and you can read about them
here. This is one example of a Doctype that you can use:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Tag Attributes
There are four things you need to keep in mind with tag attributes. First, everything within a tag must be lowercase, even the tag name itself. Second, all attribute values must be placed within quotes. Third, attributes most not be minimized. That means that every attribute must be put in the form "attribute='value'", so you can't just put a "checked" within a tag. Finally, the ID attribute has replaced the NAME attribute. This would be a valid tag:
<option checked="checked" id="opt1" value="1"> Text </option>
(4) Well-formed Tags
One of the most important things about converting XHTML is that all your tags must be "well-formed." This means that every tag must have an ending point. For example, if you use a BR tag, you must close it with a slash (make sure there is a space between the "r" and the "/":
<br />
If you are using a script tag to include a .js file, you need a closing script tag (the format used with the br tag won't
work properly):
<script src="somejsfile.js"> </script>
(5) Nesting your Tags
A proper XHTML document must have its tags nested properly -- if you open a tag within a tag, you must close the inner tag first. This is a valid example of nested tags:
|
<div>
<b> Text </b>
</div>
|
(6) JavaScript Code
Make sure you comment out your JavaScript code, like this:
|
<script language="javascript">
<!--
//code goes here
//-->
</script>
|
(7) Validate your XHTML
Once you have done all of the previous steps, make sure you've caught any mistakes. To do this, run your page through the W3C's XHTML validator, here. Finally, to make your life easier, you can download TIDY, a program that will do most of the conversion automatically.
For a list of software you can use to convert your pages to XHTML, read
this thread in our message boards!
Want to discuss this article, or other development issues? Visit our
message boards!
Or contact us directly with a comment or question on this article: click here !
|