Validating Code in Dreamweaver MX 2004

Code validation is the process of ensuring that your documents adhere to the rules of a particular markup language. For example, you can validate markup languages, such as HTML and XHTML, which the W3C (World Wide Web Consortium) created, by comparing the code against a document known as the DTD (Document Type Definition). The DTD defines the tags and syntax that are used to structure web pages and declares what the markup means. By default, Macromedia Dreamweaver always adds the relevant DTD to your web pages. Below is an example of what the DTD will look like for HTML, XHTML, and framed documents.

HTML Pages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

XHTML Pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

In this article, I explore how to validate your html/xhtml and xml code using the Dreamweaver validation engine, and explain how to set your code validation preferences. I have also created Macromedia Flash movies within each section to help show you how you can validate your code.

 

Validating Code

By comparing the code to several standards, web designers and developers can use code validation to pinpoint problem areas in certain pages or a complete site.

If you create documents with Dreamweaver MX 2004, Dreamweaver ensures that markup code it adds will pass the standards test. However, code that you write by hand may not be present in the DTD, and therefore validation is still a vital part of the site development process.

Examples of when a DTD may not be present include:

  • A document created using Dreamweaver 4.0 or lower, which by default, does not include the DTD declaration.
  • A page that consists of server-side components that will only be included within another document and therefore don’t have their own DTD or <html> and <body> tags.

About the Dreamweaver Code Validator

The Dreamweaver code validator parses and detects any syntax or structure errors that differ from the relevant standard, thus ensuring your documents are well-formed.

You can use the Dreamweaver code validation feature to find out if your code has syntax or structure errors based upon a relevant standard. Dreamweaver can validate many languages, including HTML, XHTML, ColdFusion Markup Language (CFML), Synchronized Markup Language (SMIL), JavaServer Pages (JSP), Wireless Markup Language (WML), and XML. In addition, Dreamweaver can also validate pages against Internet Explorer extensions versions 3 and 4 and Netscape Navigation extensions versions 3 and 4.

Validating HTML/XHTML

Click the following link to view a Macromedia RoboDemo demonstration of how to use the Dreamweaver validation feature to validate an HTML or XHTML file.

Use the following steps to perform the validation demonstrated in the previous RoboDemo. Please note that the following steps assume that the page you are validating has problems and warnings.

  1. Start Dreamweaver and open a page.
  2. Select File > Check Page > Validate Markup. The Results panel appears and lists problems that the validator has found. On this occasion, the Results panel displays one error and two warnings.
  3. Double-click an error message to highlight the relevant code in Split view.
  4. Select one of the warning messages, and click the More Info button to display the full description of the warning.
  5. Correct any problems with the page and run the validator again to ensure the page complies to the standard you are checking it against. I explain how to choose a standard for validating your pages in the <Setting Validator Preferences section later in this article.
  6. Click the Browse Report button to view a report of the validation in your primary browser.
  7. Click the Save Report button to save the report in XML format. You can import the XML report into an XML-savvy application.

Note: Clicking the Validate button on the Results panel displays other options that you can use to validate the entire site or selected files within the site. It also gives you the ability to access the validation preferences dialog by selecting the option settings.

Validating XML Documents

As well as being able to validate HTML and XHTML markup, you can also use the validator to validate XML code using the option, Validate as XML. Choosing this method makes the XML engine look for the DTD or Schemas that specify a target namespace.

You can also validate your XHTML documents using this option. This is because even though XHTML uses the same vocabulary and grammar as HTML, XHTML is in fact part of the XML family. It is important to note, however, that to validate XHTML documents as XML, you must first create an Internet connection. Watch the following RoboDemo demonstration on validating and fixing XML files.

Use the following steps to perform the validation. Please note that the following steps assume that the page you are validating has problems and warnings.

  1. Switch to an XML document (generated by MS Access 2002, for instance) that contains a number of errors.
  2. Choose File > Check Page > Validate as XML.
  3. The errors appear in the Results panel
  4. Repair the error(s) and run validate markup again.

Setting the Validator Preferences

In Dreamweaver, you can specify preferences for the validator. One preference you could specify is which markup languages the validator should compare against if your web document does not contain a DTD. You can also specify the type of the information that appears in the results panel and specify whether the validator engine should check for quotes and entities in your documents. Watch the following RoboDemo demonstration on setting your validator preferences.

Use the following steps to set preferences for validation.

  1. In the Results panel, select Validate (small green arrow) > Settings. You can also edit Validator preferences by selecting Edit > Preferences > Validator.
  2. The dialog box displays a list of languages to validate against if no DTD exists. Check those that you would like to include. In this example, select Netscape 4 Extensions.
  3. With Netscape 4 Extensions selected, click Options. The Validator Options dialog box displays, asking you to select which kinds of errors and warnings to include in the validation report.
  4. Select Quotes in text and Entities in text and click OK. Quotes in text checks that you use the ASCII equivalent of quotation marks, “, instead of literal quotation marks. Entities in text specifies that Dreamweaver should recommend that you change certain characters to their HTML entity equivalents.
  5. Click OK to close the dialog boxes.

As you have seen, validating your markup will ensure that your pages are portable, compatible, and interoperable for the web of today and tomorrow.

Comments