Accessibility
 
Icon or Spacer
   
An XHTML-Aware Editor
By Amy Cowen
Freelance Writer

Particularly for long-term coders, XHTML's syntax requirements can mean big changes in the way HTML code is produced. From overlooking nesting problems to omitting closing tags, many coders have HTML habits that are at odds with XHTML's rules. Taking advantage of built-in Allaire customization settings and features can help coders with bad (or lazy) HTML practices produce cleaner, more XHTML-aware code.

Being Well-Formed

In XML, a file has to be both "well-formed" and "valid" to be parsed. XHTML files are expected to follow similar rules regarding well-formedness including:

  • Case. All tags and attributes must be typed in lowercase.
  • Nesting. All elements must be properly nested.
  • Closing tags. Closing tags are required for all elements. Elements that have no closing tag get marked "empty."
  • Quotation marks. All attribute values must use "" marks.

As you'll see, tweaks to your HTML environment can help you automate processes that can help smooth the transition from HTML to XHTML.

Identifying the File

At the top of XHTML files, the <!DOCTYPE> tag must appear and denotes whether the file is using the strict, transitional, or frameset DTD for XHTML. These DTD's are specified using the following <!DOCTYPE> declarations:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

So that they are available for easy one-off insertion, you can add these three DOCTYPE declarations to your editor by going to Options / Settings and then selecting Code Templates from within the Editor branch. In the Code Templates window, you'll see the list of available DOCTYPE declarations. You want to "Add" a new one for each XHTML declaration shown above. You can then access these declarations by using Ctrl-J from within a file and then selecting the declaration you want from the pop-up list.

Alternately, you can automatically insert one of the XHTML-specific DOCTYPE declarations into your new files by changing your default HTML template, or by creating a new template. If you typically use Ctrl-N (or click the "new" icon) to start a new document, you'll want to edit the default template. If you tend to use File/New, then you may want to create a new template that you can select from the New Document pop-up window.

If you plan to edit the default HTML template, you'll find it in the Wizards/HTML directory of your installation folder. Open the file and replace the existing HTML declaration with one of the declarations shown above. After saving the file, your "new" files will automatically use the XHTML declaration.

Note: For more information on the three XHTML DTDs, see Appendix A of the XHTML 1.0 specification.

XML Declaration

While the XML declaration is not required in an XHTML file, the XHTML specification does recommend coders add this information. If used, it belongs at the top of the page (before the <!DOCTYPE>) and uses the following format:

	<?xml version="1.0" encoding="UTF-8"?>

To minimize the time involved in adding it to your pages, use the same steps described above to edit your default HTML template so that this, too, is automatically placed in your new files.

Case

Dealing with "case" in Allaire editing environments is one of the easier tasks related to XHTML. With a single-click you can drop the case of all tags to lowercase by using Edit/Convert Tag Case and selecting "Convert all tags to lowercase." This does have to be performed on a page-by-page basis, but it's a painless "before you close the file" process.

Figure 1

Figure 1: The "Convert Tags" feature allows you to easily switch your tags to lowercase.

You'll also want to go to Settings / HTML and make sure "Lowercase all inserted tags" is checked.

Note: These features will convert your element names, but will not impact your attribute names. Using Tag Insight is one approach to having your attributes entered automatically in lower-case and with the requisite "" marks if you've made the above change regarding inserted tags. The CodeSweeper described below will also address this XHTML requirement.

Closing Tags

One approach to ensuring your tags are properly closed is to use Tag Completion. Type the opening tag, and the closing tag will automatically appear. If you don't want to leave Tag Completion on all the time, you can selectively turn it on when working with XHTML documents by using the icon located in the vertical gutter.

For tags that don't have defined closing tags, you can set up an Auto Completion trigger to mark them empty. For example, <BR> is a tag that uses no closing tag in HTML. In XHTML, this tag is written <BR/> or <BR /> (which offers backwards compatibility). A simple-to-configure auto-completion trigger (like the one shown below) can add the /> every time you type in <BR. A similar trigger can be configured for other empty tags like <HR> and <IMG>.

Figure 2

Figure 2: An auto completion trigger has been constructed to add the /> to the end when <BR is typed.

Note: Read more about how to customize Auto Completion triggers in Cutting Keystrokes with Auto Completion in HomeSite.

An XHTML CodeSweeper

You don't have to delve too deeply in CodeSweeper dust to find out that a basic XHTML broom is included and ready for activation. You could customize a standard CodeSweeper to accommodate many of your XHTML needs, but the XHTML sweeper is pre-set to handle even empty tags and nesting errors. To activate this broom, go to Options / Settings and click the CodeSweeper branch. From there, expand HTML Tidy CodeSweeper and select Allaire Default HTML Tidy Settings. This will open the default settings to that you can edit them. (Alternately, you could create a new XHTML-specific Tidy CodeSweeper.) In the list of options, select "Convert document to XHTML". Be sure to unselect other choices, especially choices that contradict XHTML rules.

When you're ready to sweep a page, just click the arrow next to the CodeSweeper icon and select the appropriate HTML Tidy broom for a quick clean-up.

Figure 3

Figure 3: Use an XHTML-specific version of Tidy CodeSweeper to convert your pre-existing files to XHTML.

Better Coding

The more you work with XHTML, the easier it becomes to remember to type in lowercase and use "" marks and closing tags. But, it's nice to know that if you slip up here and there, your editor can help bail you out with minimal effort on your part!