Converting HTML to XHTML

Now that you have learned the gloriously simple language of Hypertext Markup Language (HTML), you may be quite alarmed to find out that it is out of date already. It is being replaced by XML or XHTML...Extensible HyperText Markup Language

XHTML is NOT a completely new language - it is simply more of a HTML makeover "XML based"

Lets begin with where the whole idea started from. There is an organization in the world - called the "W3C" (think WWW Committee). It is the W3C's responsibility to coordinates the standardisation of internet protocols.

Because the internet isn't just a book, but a living, fluid, rapid transfer of information, it has to constantly be ready for the next big change. Hence, XHTML has come about. The idea of the future of the web is that "Cascading Style Sheets (CSS) are used and moved around like applets for a Java program. These CSS style sheets are not completely dissimilar to the FRAMES you learned about in page 16. The style sheet is like a plug in page that you can substitute with other plug in pages.

The wisdom of the W3C council also yielded that we couldn't just shut down the whole internet while they were doing a transition from one system to the other - so we have a few different ways to get things worked around:

  1. Strict: The document code is devoid of all formatting tags like <font color".....">.
    Cascading Style Sheets (CSS) are used for controlling all aspects of presentation.
  2. Transitional: The document code allows use of presentation tags in the document.
  3. Frameset: document code containing frames.
  4. Which of the above 3 methods is used is called the Document Type Definition (DTD)
So let's get started:
To begin with - the first line in an HTML document says <HTML>
If we aren't writing an HTML page - then it should say something else no? YES!
<?xml version="1.0" encoding="iso-8859-1"?>

It is recommended by the W3C that this "declaration" be included in all XHTML documents, however there can be problems with older browsers which may not have the ability to identify this as a valid HTML tag.

The second line in the XHTML document SHOULD be the specification of the document type. In the case of what we are doing -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
meaning that we are doing TRANSITIONAL style - with ENGLISH language.

Afterward, you may begin typing your HTML page as you have always done in the past. It is expected that your next line should look something like this:

<html xmlns="" lang="EN">

The attribute "xmlns" is the "name-space" with which we associate the document. The attribute "lang" of course is the language - in this case ENGLISH

New rules for TAGS:

All XHTML tags and attributes MUST BE IN LOWER CASE. That means <BODY> and <Body> are wrong. It should always be written as <body>
All XHTML tags should have their end tags. Think </html> While it was expected in HTML - it was forgiving. XHTML is not so forgiving. If you open a tag YOU MUST CLOSE IT! Furthermore - even in commands that normally didn't require closing - they still need closed "internally as follows"
"Empty tags" should be ended with /> instead of >
The most commonly used "empty tags" in XHTML are:
  1. <meta />: for meta information (used just like in HTML).
  2. <base />: sets the base point URL for hyperlinks (this is contained in the head section).
  3. <basefont />: sets the base font for the rest of the document. *attribute 'size' is mandatory.
  4. <param />: sets special parameters for applets and objects (java components).
  5. <link />: links an external stylesheet to this document.
  6. Usage: <head>      <link rel="stylesheet" type="text/css" href="theme.css" />        </head>
  7. <img />: same as in HTML except attributes 'src' and 'alt' are BOTH mandatory.
  8. <br />: same as in HTML.
  9. <hr />: same as in HTML.
  10. <area />: a new 'image maps' tag - attribute 'alt' is mandatory.
  11. <input />: a new forms tage for input form elements like buttons, textboxes, textareas, checkboxes and radio buttons.
Example: <img src="picture.gif" alt="fugly"> is incorrect; instead it should be <img src="picture.gif" alt="fugly" />

All XHTML tags MUST be properly nested! Example: <font color="red"><i>Italicized AND red?</font></i> is wrong.
Instead it should read: <font color="red"><i>Italicized AND red!</i></font>

Rules for XHTML Attributes

  • All XHTML attribute names must be in lower case.
  • All attribute-value pairs should be "in quotes"
  • The "name" attribute will be replaced with the "id" attribute
  • Example: <frame name="FrameOne" > becomes <id="FrameOne" >
  • All & (ampersand) characters in the source code have to be replaced with &amp;

XHTML and Javascript

  • The type attribute is mandatory for all <script> tags. For Javascript, the type value is "text/javascript"
  • The use of external scripts is always recommended.

  • Example:
    <script type="text/javascript" language="javascript" src="MathFunction.js"></script>
  • If you MUST use javascript internally, enclose it within the starting tag <![CDATA[ and the ending tag ]]>. This marks it as unparsed character data, much like the <pre> tag in HTML. Otherwise - it is pretty much the same as the HTML you have already studied.
On The Following Indicator...
( GREEN will indicate your current location)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24


Otherwise - please click to visit an advertiser so they know you saw their ad!

This Course was written by Ray Dall © All Rights Reserved.
This page and all its content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1

Add Me!