To get a new browser is slightly cheaper
than my time because it is free.



A Five-Minute XHTML Class



I
N
T
R
O

re you planning to take XHTML classes or read an XHTML book? If you know HTML well, don't do it, unless advised below. XHTML is not more than a cleaner and stricter HTML. OK, it is extensible. That is what the X stands for. But who cares about extensibility when one can do almost anything with HTML, CSS and JavaScript.

HTML and XHTML have about the same tags, attributes and events. Some HTML attributes that became deprecated in version 4.01 finally are out in XHTML version 1. Here is an example. Because of backward compatibility, the <td> HTML tag still may have the obsolete bgcolor, width, and nowrap attributes, although other up-to-date solutions can deliver the same features. In XHTML the formatting attributes are not just outdated but unsupported, too. So, the same <td bgcolor="red"> line in the same browser can or cannot paint the table cell red, depending on the first, DTD line of the page. If it says

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

the red background does not show. If it says

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

the red background shows in the above table cell. I would not encourage you to use the latter DTD line for an alleged XHTML page just to keep the obsolete elements, because deprecated elements or HTML as a whole sooner or later become unsupported. Well, probably later than sooner. Still, you better replace the obsolete elements with the newer ones. Above, I painted the background yellow with an inline style: <span style="background:yellow">XHTML 1.0 Strict</span>. Presentation with style elements has already been introduced in HTML. By applying them, one can move smoothly in the XHTML world. Until you replace all HTML presentational elements with style elements, you may stick to the Transitional doctype.

The basic rules that differentiate XHTML from HTML are as follow:

  1. XHTML elements must be properly nested.
  2. XHTML documents must have the <html> root element.
  3. Tag names and attribute names must be in lowercase.
  4. All XHTML elements must be closed.
  5. All attributes must have a value.
  6. Attribute values must be (single or double) quoted.
  7. The id attribute replaces the name attribute.

If you were a conscious HTML developer you probably obeyed about two-third of the above rules anyway. Here is an example that may work in HTML but doesn't work in XHTML:

<html>
  <head><title>Ill formed</title>
  <body> <b><i>Hey you!</b></i><br>
    Check the box if you like to rock and roll:
    <input type=checkbox checked>
  </body>
</html>

Can you see the problems? Come on, name at least one!

  1. <b><i>text</b></i> is not properly nested.
  2. <head> is not closed. The </head> end tag is missing.
  3. The checkbox value is not quoted and the checked attribute of the input box is empty. The correct form is
    <input type="checkbox" checked="checked" />
  4. <br> is not closed. OK, as an HTML developer, you were not supposed to know that. Empty elements, i.e, meta, link, br and img that don't have end tags should be closed like this: <br />. A space before the "/" character is not part of the rule but necessary to avoid a glitch in Netscape.)

A kind insult to the reader: If you need further explanation to this example, you need to go to that XHTML class or read that XHTML book. If you did not understand the first two problems, you need to take an HTML course before dealing with XHTML. But first, you need to go back to elementary school to learn about the pairs of opening and closing brackets.

Once you follow the above rules, you may try to change your DOCTYPE from HTML 4.01 Transitional to XHTML 1.0 Transitional. I would not advise you to try the XHTML Strict standard at first. This page, for example, is valid XHTML 1.0 Transitional but it would not pass the strict criteria, because I used the target attribute for an anchor, which is unacceptable by XHTML 1.0 Strict. If I set the target by adding a <base target="_blank" /> tag in the head, I could have eliminated the target attribute from the restricted <a> tag but then, my navigation buttons worked incorrectly and opened the previous or next page in a new window. On the other hand, putting the target="_blank" attribute of the anchors in the JavaScript code that creates the navigation buttons, would have made me strict XHTML compliant. In this case the page would have passed the strict criteria because the non-compliant part was hidden in a script, in which the validator does not check the generated HTML or XHTML code. Then I would have displayed the W3C's XHTML 1.0 Strict icon legally but I would not be proud of it. I am proud of the cross-browser logo though, that I designed, granted to myself and displayed at the bottom of all pages.

The following anchor is XHTML 1.0 Strict compliant. It opens the page.html page correctly in a new window if JavaScript is enabled but in the same window if SavaScript is disabled:

<a href="page.html"   onclick =
  "window.open('page.html', 'myWindow', 'width=400,height=400');
  return false">Open page.html </a>

You may test the validity of pages at http://validator.w3.org. Are your pages valid XHTML Transitional? Good! Actually, transitional does not mean exactly what it says. One should also use transitional doctype if one assumes that the used browser does not understand CSS and the developer has to double her presentational efforts by including old fashion formatting with HTML tags, not only with CSS. If you are heading in that direction, you really need to go to a class or read an XHTML book. Recently I do not deal with browsers without CSS capability. I just tell the users: Go get a new browser that supports Cascading Style Sheets. It is slightly cheaper than my time because it is free.

Again, if you understood the above seven rules and your page passed the XHTML Transitional validation, you are an XHTML developer already. Class dismissed.

Summary

Following the standards helps you to create fast, maintainable cross-browser pages. Big Web sites seem to be ignorant and they don't obey the rules. You can do better than them without taking XHTML classes. XHTML is not more than a cleaner and stricter HTML. Strict XHTML pages are rendered faster than loosely written HTML pages.

Problem

In a previous article, Let's Make the World Round Again, I showed a solution for creating rounded frames. The solution uses table elements with non-XHTML background elements, discussed in the introduction of this article. Rewrite the roundborder.js script to make it XHTML-compliant.