Many people have asked me, on several different occasions, what's so different with XHTML 1.0. Well, this list of rules is based on XHTML 1.0 Transitional, and it should help everyone understand what exactly sets XHTML 1.0 apart from HTML.
Rule #1 - Open with the right DOCTYPE, Namespace, and Charset.
You must use the following
DOCTYPE with every website you decide to code in XHTML 1.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This
DOCTYPE should be typed or pasted into the top of every web site you code.
Following the
DOCTYPE, you MUST have a proper
Namespace declaration. For XHTML 1.0 Transitional, you use the following:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This
namespace declaration directly follows the
DOCTYPE and replaces the regular "html" tag seen while coding with HTML 4.01 (or whatever the latest version is now).
As for the
Charset you simply use the following:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
This
META tag states what
charset you want to use. In most cases, the META tag above will be fine.
Rule #2 - Close all your tags!
This rule is a little hard to understand and get used to at first, but I'm sure you'll catch on quick. For this rule, you simply have to close ALL tags, whether that be a tag that has a proper closing tag already or a
tag that, naturally, has no closing tag. So, how do you close a line break tag, or an image tag?
<br> - WRONG
<br /> - RIGHT
<img src="blah.jpg"> - WRONG
<img src="blah.jpg" /> - RIGHT
<hr> - WRONG
<hr /> - RIGHT
Remember though, that a single space PRECEDES the /> to prevent confusing older browsers. I assume that's pretty self explanitory so I'll be moving on to the next rule now.
Rule #3 - All attributes MUST be in quotations.
With HTML, it's slack enough to allow attributes to be displayed as width=66 or border=1, but with XHTML, quotes are required around ALL attributes. For this, width=66 becomes width="66". It's as simple as that.
Rule #4 - All tags MUST be in lowercase.
Again, in regular HTML, they allow elements to be typed as:
<TABLE>
<TR>
<TD>Blah</TD>
</TR>
</TABLE>
Now, in XHTML, all elements must be lowercase, which leads to the following:
<table>
<tr>
<td>Blah</td>
</tr>
</table>
Rule #5 - The "alt" attribute.
In XHTML, all image tags are required to also have an "alt" attribute. The "alt" attribute is used as follows:
<img src="goldengate.jpg" alt="Golden Gate Bridge, San Fransisco California" />
Why is the "alt" attribute required? Several people use text browsers, which displays no images, so for one, if you have a navigation made up of images, alt tags allow text browsers to see what each link is, without actually seeing the image itself. Just another way to make your website more accessible.
Well, that's all folks. By coding in XHTML, you help to make your websites compatible with a host of other browsers that may be older, or may display things slightly different. XHTML helps to bridge the gap between different browsers, helping (if used properly) to make your web page visible and navigatable by more users. I hope these rules help you gain a better idea of how easy it is to switch to XHTML 1.0.
