Accessibility
 
 
 
XHTML Coding in HomeSite/ColdFusion Studio 5
 By: Kristi Jabbour, Technical Writer, Dream Tools
and Dan Hulse, Project Lead, HomeSite R&D
Macromedia

In a previous DevCenter News article, An XHTML-Aware Editor, Amy Cowen described how coders can use built-in customization settings and features to produce cleaner, more XHTML-aware code. Now, with the new version of HomeSite and ColdFusion Studio, it is even easier to code in XHTML. You can set XHTML-specific options, use coding tools that support the XHTML 1.0 specification, use an XHTML color coding scheme, use a CodeSweeper to reformat your code to be XHTML-compliant, and validate against the XHTML 1.0 specification, all without leaving the product.

But first, what's the big deal about XHTML? If you already know the answer to this question, skip ahead. Otherwise, read on.

What is XHTML?
Why would I want to code in XHTML?
Setting options for XHTML coding
Using coding tools that support XHTML
Setting color coding for XHTML
Using CodeSweepers to convert your code to XHTML
Validating XHTML code
Resources

What is XHTML?
XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML as an XML application. It is almost identical to HTML 4.01, but it is more strict and clean.

So what is XML? Extensible Markup Language (XML) defines the structure of information, or how the information could be stored in a database. For example, an XML language for cooking could have a <recipe> tag, and <recipe> could contain tags for <header>, <ingredients>, and <instructions>. The power of XML lies in the fact that information can be stored and retrieved from a database, rendered in a variety of formats, and used for a variety of purposes; for example on a Web page, hand-held computer, or cell phone; or for a cookbook, recipe card club, or book about cilantro.

Why would I want to code in XHTML?
XHTML is designed to replace HTML. So it is a sound investment to begin coding in XHTML now, if you want your Web site to be a visible part of the Internet in the future (and for browsers to render it in approximately the way in which it was designed!). Also, because XHTML is an XML application, it offers the potential for extensibility.

Coding in XHTML ensures that you maintain your coding skills, and it maximizes the possibility that your work will be rendered the same across browsers. Most of the discrepancies between browsers today are caused by their different error handling algorithms. For example, Internet Explorer handles HTML errors by displaying what it determines to be the coder's intention. Other browsers such as Opera render the code in strict accordance to the HTML specification; if you make a mistake, it renders your code accordingly. Many browsers fall in the middle of this spectrum.

As the ubiquitous IE became more sophisticated in determining coders' intentions, coders' skills decreased. Many do not even realize they are making mistakes, until they view their work in other browsers. Even then, they might be inclined to blame the browser! If everyone in your audience uses a certain browser, you can just include a "Best viewed with..." label on your site. But otherwise, you needlessly exclude and alienate a portion of your visitors. Coding in XHTML solves this problem.

XHTML works on most existing HTML browsers as well as on XML systems, so you can switch to XML without excluding anyone or waiting for XML-based browsers to become more prevalent. Because XHTML is so similar to HTML, it is not difficult to switch from HTML to XHTML.

For complete information on the specific rules of XHTML, see the W3C specification for XHTML 1.1 - Module-Based XHTML or XHTML 1.0.

Setting options for XHTML coding
HomeSite/ColdFusion Studio has many options for working with markup languages in general. These options are described in the product documentation, under Setting Options for Markup Languages.

To set options that are optimal for XHTML:

  1. Open the Options > Settings > Markup Languages pane.
  2. Select the following options: Lowercase all inserted tags, Include closing </p> when inserting paragraph tag, Insert numeric values surrounded by quotes (Tag Inspector), and Minimize empty tags (e.g., <br/>).
  3. In the Insert special characters as box, select Character entities. (Numeric references need to have the ampersand encoded; for example &#38; instead of just &.)
  4. Under the Markup Languages pane, in the HTML/XHTML pane, select Compatibility mode for older browsers (e.g., space before "/>"). This ensures that your code displays properly in older browsers, for example by inserting a space before minimized empty tags (<br /> instead of <br/>).
  5. Select Display DTD selection dialog when the XHTML namespace is specified if, when you select Options > Set Document as XHTML, you want to be able to choose between inserting the DOCTYPE declaration for the XHTML Strict, Frameset, or Transitional DTD, or not inserting/replacing a DOCTYPE declaration. The dialog box that appears has options to Always replace with this DTD or Don't ask me again, in case you do not want it to appear again.

    If you clear this option, when you set a document as XHTML, no dialog box appears and no DOCTYPE declaration is inserted or replaced.

  6. Click Apply.

Using coding tools that support XHTML
Tag editors, Tag Inspector, Tag Insight, and other coding tools support the XHTML 1.0 specification. This means that, in an XHTML document, tag editors insert XHTML-compliant code, Tag Inspector displays information in its attribute table that is appropriate for XHTML, and Tag Insight displays a list of completion options that are appropriate for XHTML.

The only thing you need to do to take advantage of this support is to create an XHTML document, or set the current document to be XHTML.

To create an XHTML document, do one of the following:

  • Create a document with one of the templates available in the File > New > XHTML dialog box (Strict, Transitional, or Frameset)
  • Open or create a document containing a Strict, Transitional, or Frameset DOCTYPE declaration

To set the current document to be XHTML:

  1. Select Options > Set Document as XHTML for the current document. This will have no effect if the current document is read-only.
  2. If Options > Settings > Markup Languages > XHTML/HTML > Display DTD selection dialog when the XHTML namespace is specified is selected, a dialog box appears. Select the DOCTYPE declaration for the DTD that you will use (there are three versions of the XHTML 1.0 specification). Select No replacement if you do not want to change or add a DOCTYPE declaration, for example if you are writing XHTML code to include in another page that already has its own DOCTYPE declaration.
  3. If you do not want the dialog box to display again and you will always use the same DOCTYPE declaration, then select Always replace with this DTD.
  4. If you do not want to display this dialog box, and you never want to replace or insert a DOCTYPE declaration, then select Don't ask me again.
  5. Click OK.
  6. If you need to undo this, select Options > Set Document as XHTML again with the XHTML document as the current document in the Editor. In the Confirm dialog box, click Yes.

Setting color coding for XHTML
This section explains how to use the default color coding scheme for XHTML. You can modify this default scheme as necessary; for details, see the product documentation under Using Color Coding Schemes.

To use the XHTML color coding scheme in your documents:

  1. In the Options > Settings > Editor > Color Coding pane, select Extensible Hypertext Markup Language (XHTML) and click Set as Default.
  2. Click Apply.

Using CodeSweepers to convert your code to XHTML
There is more than one way to configure a CodeSweeper to convert your code to be XHTML; this is one possibility.

To use a pre-configured XHTML CodeSweeper:

  1. Open the Options > Settings > CodeSweeper > HTML Tidy CodeSweeper pane.
  2. Select Macromedia HTML Tidy Settings and click Edit Profile. This opens the default settings for editing.
  3. In the Formatting options box, select Convert document to XHTML and other options as desired.
  4. In the Char encoding box, select UTF8.
  5. Set any other options as desired.
  6. Click Apply.
  7. To use the CodeSweeper on the current document, select Tools > CodeSweeper > Macromedia HTML Tidy Settings.

Validating XHTML Code
When you configure the validator to check your code against the XHTML 1.0 specification, it checks if the document follows these rules:

  • Tag element and attribute names must be in lowercase.
  • Document must have an XHTML DOCTYPE declaration.
  • The document must have <html>, <head>, and <body> elements.
  • The title attribute must be in the head element.
  • Elements must nest symmetrically, for example <i><b></b></i>, not <i><b></i></b>).
  • Every tag must have an end tag (in pairs <></>, or shortcut form </>, < />).
  • Empty elements must have a corresponding end tag or contain an ending slash in the start tag.
  • Every attribute value must be quoted.
  • An attribute value cannot be minimized. For example you cannot have <input checked>; it must be <input checked="checked">).
  • If an element has a lang attribute, it must also have a xml:lang attribute.

Following are instructions for configuring and running the validator.

To configure the validator for XHTML:

  1. In the Options > Settings > Validation pane, select XHTML 1.0 Strict.
  2. Click Validator Settings.
  3. In the Validator Configuration dialog box, on the Options tab, in the Report box, select every type of error except CFML Compiler Errors.
  4. In the Other box, select the options to check for quotes in text and report special characters. Checking for quotes ensures that each quotation mark is followed by another of the same type (' or "). Reporting special characters catches errors like having "&" instead of "&". The Tags tab is for customizing the structure and requirements of a tag set; for example, to require an attribute for a tag. The Versions tab is for extending the tag sets against which you can validate. The Values tab is for validating regular expressions. All of these are unnecessary for a standard XHTML document, so this configuration is complete.
  5. Click OK.
  6. Click Apply in the Settings dialog box.

To run the validator:

  1. Display the XHTML document to validate in the Editor.
  2. Select Tools > Validate Current Document from the menu. The Validation Results pane displays a "No errors or warnings" message or lists the syntax errors it found.
  3. Double-click an error message to highlight it in the document.

Note that if you validate both CFML and XHTML in a single document, the validator cannot assess the pound sign (#). This is because, in CFML, the single pound is an error and the double pound is correct; while in XHTML, the double pound is an error and the single pound is correct.

Resources
These are some resources for learning and coding in XHTML: