XHTML vs HTML Tutorial

HTML is rapidly being replaced by XHTML. The differences are very minor, but the results of switching can be worth the effort. The primary benefit is that XHTML is more widely accepted in non "computer" devices like cell phone, palm devices and other scaled down browsers. This is commonly called portability between devices.
XHTML is also said to be extensible, which is the fancy way of saying the new tags can be added without a new document type declaration.

Firstly, what are the differences:

the tags in the page MUST be in lower case, so instead of <IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat">, as we would do in HTML, we instead use: <img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" />
all tags must close, either by using a corresponding closing tag which has a slash, like paragraph ( ) for example, or some tags are self closing like the above img src tag and line break ( ). In HTML, many of these tags were simply left open.
all tags must be properly nested, so if you start tag "a" and then start tag "b", you must close tag "b" before you close tag "a"
some tags which were previously allowed are no longer allowed, although see the discussion below of document type declarations (DTD's).
all attributes must also be lowercase
all values for attributes must be encased in single or double quotes
all attributes must be long form, not abbreviated, for example: disabled="true" in XHTML vs DISABLED in HTML
structure must be separated from content. So for example, the tag is a content tag (paragraph) so you can't put a table in it for example, because a table is a format construct. You can however put the tag inside <td> </td> tags with no problem because the content goes in the construct, not the other way around.

The first thing you will notice if you look at the source of an XHTML document is that the first line is a document type declaration (DTD also called the DOCTYPE). There are three that are used, strict (that will only validate if you have no deprecated tags), transitional (which will still validate with deprecated tags) and frameset (which is for a page that "sets" up "frames"). Oddly enough, even though all tags in XHTML are lower case, parts of the DTD must be in upper case. The three DTD's look like this:

Strict -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Transitional -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

So what's one to do?
Well for all new documents make them XHTML Compliant from the start. Transitional is fine, as it's tolerant if something depreciated slips in. You should also consider converting your existing files to XHTML. Notetab, for example will allow you to convert from HTML to XHTML with a few clicks (Modify/Change HTML Tags/Convert to XHTML).
Dreamweaver MX will also allow you to select XHTML when creating a new document. You will be glad you took the time later on down the track.

A couple of little suggestions:
1. Read up on the depreciated tags in XHTML (they are also depreciated in HTML 4), and at least be aware of the tags that are "depreciated", tags like: <center>, and . Also be aware that some tag attributes are depreciated, like 'align' for example.
These tags are depreciated because what they do (or did) can now be better or more easily done with CSS.
You should be aware of these depreciated tags and methods, and slowly train yourself not to use them. That way in time you should be able to validate to XHTML strict.

2. Get in the habit of using the tools available to help you write clean code, we have a couple of them you can use here. To clean up your code (it fixes many common errors) and tidy up your indenting (which makes your code much easier to read) you can try our online copy of "HTML Tidy" here.

Once your code is neat and hopefully error free, its time to run it through the W3C validator and see if its valid HTML/XHTML. We have a copy of the W3C validator which you can use anytime you need it, Totally Free. It can be found here.

The Difference between strict and transitional HTML / XHTML:
In short, transitional is a forgiving form of doctype as it allows depreciated tags and attributes to pass validation, and the browser will do its best to display the page as you wanted it. You must still have properly nested lowercase tags to get validation though.

The strict doctype is just that, all the depreciated tags and attributes will fail to validate under a strict doctype and may well display incorrectly as well.
See here for more information on the tags classed as depreciated in modern HTML / XHTML.

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki needs to get his girl out on a date soon.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

Time in Don's part of the world is: Thur, December 26, 2024 at 9:02 PM
Time in Franki's part of the world is: Friday, December 27, 2024 at 10:02 AM
Don't worry neither one sleeps very long!