XHTML | Special Edition Using Macromedia Studio MX 2004

As you delve more deeply into XHTML, you can begin to see how it uses aspects of both familiar HTML concepts and strict ideas influenced by XML. In XHTML, document conformance and DTDs are essentials. This is true, too, of HTML 4.

Document Conformance and Document Type Definitions

For a document to conform to XHTML 1.0, it must adhere to the following:

The document must validate against one of the three DTDs: strict, transitional, or frameset.
The root element of an XHTML 1.0 document must be <html> .
The root element must designate an XHTML namespace, using the xmlns attribute.
A DOCTYPE (document type) definition must appear in the document prior to the root element.

In XHTML 1.0, as with HTML 4.0, there are only three preset DTDs. How you write your XHTML documents ”and how they're validated by various tools ”relies on the DTD you choose.

In XML, and for future versions of XHTML, DTDs can be customized. This adds a great deal of power to your toolkit because you can define the rules and the actual tags a document must use to conform to that common language. So, if a company makes a special product, it can create its own vocabulary to manage that product. Or entire industries, such as medical or financial, can share DTDs specific to their unique needs.

The three DTDs currently available for your use in XHTML 1.0 are

Strict
Transitional
Frameset

These DTDs are the same as those in HTML 4.01. The actual vocabularies are somewhat different, however, reflecting the rigor and syntactical shifts that have occurred in XHTML.

XHTML 1.0 that follows the strict document type definition is the most rigorous ”and the purest ”of XHTML syntax. Transitional XHTML 1.0 is the more forgiving vocabulary within the standard. You must still follow syntax rules and the rules for well- formed documents, but you have leeway with certain elements, attributes, and code approaches; for example, you can use deprecated tags, such as font or center . Finally, the Frameset DTD denotes a document as a frameset. Any frameset you create in XHTML 1.0 must be declared as such; otherwise , it will not validate.

To convert an HTML document to XHTML in Dreamweaver MX 2004, select File, Convert, XHTML. (Incidentally, you must repeat this step for each file in a frameset.) To create a new document that uses XHTML, choose File, New, and select the Make Document XHTML Compliant check box.

Well- Formedness and Syntactical Rules in XHTML 1.0

Any document you write must follow the correct order of elements and the correct method of writing those elements. As you probably realize, browsers forgive. So, if I were to write the following in HTML:

 <b><i>Welcome to my Web site!</b></i>

A browser is likely to display my text as both bold and italic. However, look at the markup. It opens with the opening bold tag and then the italics tag. But instead of nesting the tags properly, the bold tag is closed first. This is improper nesting, and as a result, the code is considered poorly formed. To be well-formed, the code must be properly ordered:

 <b><i>Welcome to my Web site!</i></b>

This is a well-formed bit of markup. "Well-formedness" (English majors, pardon the awkward construction!) is a critical concept in XHTML 1.0.

Some other issues related to markup in XHTML 1.0 include

All elements and attribute names must appear in lowercase ” HTML is not case sensitive. But in XHTML, every element and attribute name must be in lowercase:  . Attribute values (such as "right" in this case, but also in case-sensitive filenames in URLs) can be in mixed case.
All attribute values must be quoted ” In HTML, you can get away without quoting values, as in:
```
 <img src="my.gif" height=55 width=65 alt="picture of me"> 
```
Some attributes are quoted, some aren't. But when writing XHTML, you must quote all attribute values :
```
 <img src="my.gif" height="55" width="65" alt="picture of me"> 
```
All non-empty elements require end tags, and empty elements must be properly terminated ” A non-empty element is an element that might contain content or other elements. A paragraph is non-empty because within the tags exists text, images, or other media. In HTML, you could open a paragraph but not close it. In XHTML 1.0, you must close any non-empty element. Use this:
```
 This text is content within my non-empty paragraph element. 
```
not this:
```
 This text is content within my non-empty paragraph element. 
```

Empty elements, such as breaks, horizontal rules, and images, do not contain content. In XML, and thus in XHTML, a termination is required in the form of a slash after the element name, so   becomes   . Because some browser bugs cause pages to render improperly, in XHTML 1.0 you must add a space before the final slash to ensure the page is readable:

 <br />.

Remember that image element just a few paragraphs ago? Even with all the attributes quoted, it's not proper XHTML 1.0. Because it's an empty element, it must be terminated accordingly :

 <img src="my.gif" height="55" width="65" alt="picture of me" />