XHTML vs HTML
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.
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
<p></p>for example, or some tags are self closing like the above img src tag and line break<br />. 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
<p>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<p>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">
Measures to be taken
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). Macromedia 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.
Suggestions
- 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>, <u> and <font>. 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. - Get in the habit of using the tools available to help you write clean code.
To clean up your code (it fixes many common errors) and tidy up your indenting which makes your code much easier to read.
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.
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.
Deprecated tags
<applet> |
Use the <object> tag instead, see here for more information. |
<basefont> |
Use CSS instead. |
<blockquote> |
Define a CSS style to achieve the same effect. |
<center> |
Use CSS instead. |
<dir> |
Use an unordered list <ul> instead. |
<em> |
Use CSS instead. |
<font> |
Use CSS instead. |
<isindex> |
|
<listing> |
Use <pre> and or CSS instead. |
<menu> |
Replace with the <ul> tag and/or CSS instead. |
<nextid> |
|
<plaintext> |
Use <pre> and or CSS instead. |
<s> |
Use <del> and or <ins> instead. |
<strike> |
Use <del> and or <ins> instead. |
<u> |
Use CSS instead. |
<xmp> |
Use <pre> and a CSS style instead. |
Deprecated HTML / XHTML tag attributes
All of these can be replaced with CSS styles.
- align
- alink
- background
- bgcolor
- color
- hspace
- link
- size
- text
- type
- vlink
- vspace
Source: http://htmlfixit.com
