We are all resistant to change at times, especially once we've already grown comfortable with our own way of doing things. But as web developers, it is our responsibility to stay up-to-date with current web standards and other internet trends. We need to frequently make changes to the way we create websites in order to provide accessible, compatible, and overall great looking websites to our audience. HTML made the jump to XHTML quite a while back but there are still some of us out there that are resistant to the change. Those hesitant about making the switch would be happy to hear that XHTML isn't too different from regular HTML and doesn't take long to learn.
Compatibility is the main reason to use XHTML. Not every browser on the market has the capabilities to reading "bad" HTML, especially those built into hand-held devices such as cell phones. Extensible Hyper Text Markup Language (XHTML) allows for easier document processing with the convenience of standard XML tools, thus making our web pages far more accessible to a variety of different browsers and devices.
XHTML will soon replace HTML. If we continue to create web pages in regular HTML, we may find that our web pages won't behave properly or consistently across various browsers and devices. So, the sooner you can make the migration from HTML to XHTML, the easier things will be for you later on!
The main difference from HTML is that XHTML is an application of XML (Extensible Markup Language), while HTML is an application of SGML (Standard Generalized Markup Language). In contrast, one is more forgiving than the other. XHTML, the less forgiving language, demands to be well-formed, so there are more rules and less exceptions than there are in HTML. Overall, the differences are pretty black and white. Let's look at some of the current differences between HTML and XHTML:
| HTML 4.01 | XHTML |
|---|---|
| Case-insensitive | Tags and attributes must be all lowercase |
| Forgives non-closed tags | All tags MUST be closed |
| Forgives improper nesting | All tags MUST be properly nested |
| Allows attribute minimization | All attributes MUST be a name value pair (name="value") |
| Allows unquoted attributes | All attributes MUST be quoted |
| Requires no DOCTYPE | MUST have a DOCTYPE (explained later) |
| Allows non-encoded entities | Requires entities to be encoded |
<P>The quick brown fox <B>jumps</B> over the lazy dog. <UL> <LI>He ran... <LI>& ran... <LI>& ran! </UL> <br> <hr noshade> <P ALIGN=center>The end.
<p>The quick brown fox <b>jumps</b> over the lazy dog.</p> <ul> <li>He ran...</li> <li>& ran...</li> <li>& ran!</li> </ul> <br /> <hr noshade="noshade" /> <p align="center">The end.</p>
We also need to make sure that we don't nest list elements (or any other element for that matter) improperly, which is a common mistake in lists. Notice the correct way to nest a list inside of another list is to place your nested list inside of a list item, not after it.
<ul> <li>Mammal</li> <ul> <li>Dog</li> <li>Cat</li> </ul> <li>Reptile</li> <li>Amphibian</li> </ul>
<ul> <li>Mammal <ul> <li>Dog</li> <li>Cat</li> </ul> </li> <li>Reptile</li> <li>Amphibian</li> </ul>
On top of a more strict syntax, some tags and attributes have now become deprecated, or in other words, their use is now being discouraged. The center tag was once used to center elements, we used the font tag to format text, and the bgcolor attribute let us change the background color of elements. I'm afraid that they are done for.
The functionality these tags and attributes once provided is not lost however. Some tags and/or attributes simply have a direct replacement, but for the most part, the use of CSS (Cascading Style Sheets) through style sheets and inline styles (use of the core style attribute) will give us what we want. CSS will allow you to apply styles to any element in your document to give you the effect that these once useful tags provided. Below is a table that will show you some deprecated tags and their alternative.
| TAG | USE | ALTERNATIVE |
|---|---|---|
<font> | font & misc. styling | <p style="font-size:12px;">Hello World</p> |
<s><strike> | strike-through | <p style="text-decoration: line-through;">Hello World</p> |
<u> | underline | <p style="text-decoration: underline;">Hello World</p> |
<center> | center an element | <p style="text-align: center;">Hello World</p> |
| ATTRIBUTE | USE | ALTERNATIVE |
|---|---|---|
| bgcolor | define background color | <p style="background: #000;">Hello World</p> |
| hspace | horizontal margin of image | <p style="margin: 0px 10px 0px 10px;">Hello World</p> |
| vspace | vertical margin of image | <p style="margin: 10px 0px 10px 0px;">Hello World</p> |
| link | define hyperlink color | a:link {color: #00C} |
| alink | define active hyperlink color | a:active {color: #000} |
| vlink | define visited hyperlink color | a:visited {color: #C0C} |
It should also be made a good practice to avoid underlining text for emphasis. Underlines have widely become associated with hyperlinks and people expect underlined text to act as a hyperlink. So to avoid confusion, it is encouraged that underlining be preserved for hyperlinks only.
Click here, for an always up-to-date list of deprecated tags provided by www.w3schools.com.
The DOCTYPE tag associates the document we are using with a particular Document Type Definition (DTD) which specifies the syntax used in your document. Your DOCTYPE is declared on the first line before anything else in your document and is the only tag that does not get closed. Let's look at the three DOCTYPEs used in XHTML.
This DOCTYPE does not support deprecated tags and requires well-formed code. If you're a beginner, consider it a goal to eventually use this DOCTYPE in all of your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
This DOCTYPE allows deprecated tags. This is the most commonly used DOCTYPE, but the "Strict" DOCTYPE is still more desirable since it doesn't allow bad HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
If you're using frames and require something that will support Frameset, you'll want to go with this DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
So there you have it! You are now ready to start using XHTML in your web pages. Pretty easy, right? One last thing that you will definitely want to bookmark or add to your favorites is the XHTML Validator provided by www.w3.org. This validator will check your syntax and tell if you made any mistakes that are incorrect under the DOCTYPE that you used.
For more information on XHTML visit www.w3schools.com/xhtml.
© 2007-2010 Samenmais Corporation™
