Article
XHTML - An Introduction
Page: 1 2
End Tags
Most HTML designers leave out the end tags to certain elements such as </p> If you didn't know <p> even had an end tag, you're not alone. Here are the tags most likely to catch you out: <th> <tr> <td> <li>
What about images and line breaks?
Good question. These elements are similar, and all require an end tag. That's the way XML works, and of course XHTML is no exception even if there is no end tag in the HTML equivalent. You deal with this by including the end tag in its opener. Here's an example:
<p>XHTML is strict but not really hard</p>
<img src="somePic.gif" /><br />
<p>See what I mean?</p>
<hr />
The trick is to leave a space before the closing tag so as not to confuse non-XHTML browsers.
Attributes
There are a couple of things you should be aware of when you're dealing with attributes. The first is that all your attributes must be enclosed within "double-quotes".
The second is that for those attributes that in HTML have no value such as <ul compact> you must specify one. It's done like this:
<ul compact="compact">
Other attributes to watch for are:
ismap="ismap"
declare="declare"
nowrap="nowrap"
compact="compact"
noshade="noshade"
checked="checked"
Special characters
I hate to say it, but this is the point where XHTML becomes a bit of a pain. Most of the above is just a matter of disciplining yourself and developing good coding habits, but there are a few problems here that require special mention. They'll almost certainly cause you trouble if you're unprepared!
- XHTML can be a little problematic in its handling of <, > and & characters in CSS and JavaScript. XML browsers may remove your comments and thus your commented CSS. Use External stylesheets and JS scripts to be certain (although I've had no problems so far and do not do this on my own site).
- Ampersands can be a problem within attributes as well. As a general rule of thumb, just use the corresponding HTML entities for &, <, > characters and make sure that you validate your pages properly.
Use id instead of name
The name attribute is now deprecated in favour of the new and prefered id attribute. Although it's supported, you'll get warnings when it comes to validation if you use name on a map tag, for instance.
A simple XHTML document
Okay, enough with the do's and don'ts. If you're eager to get going here's a simple XHTML document to get you started.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML is easier than you thought!</title>
</head>
<body>
<hr />
<p>As long as you remember the rules and guidelines
above<br />
you'll soon be writing well formed documents.
No really, you will! </p>
<hr />
</body>
</html>
A detailed explanation of the declarations at the top of the document is beyond the intended scope of this "quick start" guide (and quite unneccessary for most designers), but here's the simple version.
Lines 1 Tells the browser that we're using XML 1.0 and gives its encoding as 8-bit Unicode.
Line 2-4 States the DTD we're using, which in this case is the transitional version.
Line 5 Declares in the <html> tag the XHTML name space and language attributes.
And there you have it, you're all set to start writing well-formed, standards-compliant XHTML pages! All you need do is use the code above as your basic template and start getting into good coding habits from the outset. If you find that you can't validate every page on your site properly then don't worry, it's a pretty tough call. As long as you're making an effort to validate as much as possible you're doing a good job.
Further information and resources
Official sources
XHTML 1.0: The Extensible HyperText Markup Language
Tutorials and articles
An XHTML Roadmap for Designers
Good luck!