Validating Your Pages

Before you can save the page you have created as a Dynamic Web Template or DWT for short, you should make sure that both your HTML code and your CSS code validates. To understand WHY it is important to validate your code read Code Validation - Clean Code by Susan Emerson.  Expression Web has some tools within the program that will help you with validating your page.

Compatibility Checker on Status Bar

Much of this information will apply to Expression Web 3.0 as well as 4.0.

As you continue to build your site and work on your pages, you should get in the habit of validating the page BEFORE you publish it. Expression Web has various tools to help you with this. Two very helpful options that you should have already set are located under Tools > Page Editor Options > General tab. They are:

1. Highlight Invalid HTML which will display invalid HTML in a specific color scheme (the default is red text on a yellow background). If you choose to change the colors, you can specify this color scheme in the Color Coding tab of the Page Editor Options dialog box.
2. Highlight Incompatible HTML which will display a wavy underline beneath code that isn't compatible with HTML standards.

Status Bar

The Status Bar is located on the lower right hand corner of your workspace and displays among other things information about the file you are editing, such as file size, HTML schema, and CSS schema.

Figure 1: Status Bar From L to R, the symbols: Incompatible HTML   - Invalid HTML - HTML schema - File Size - Visual Aids Mode - CSS schema - Current Page size

This article will discuss the first two, Incompatible HTML and Invalid HTML. The above example shows there are compatibility errors detected and HTML errors detected.

Compatibility Checker for Incompatible HTML

 You will need to work in Split View or the Compatibility errors will NOT show as errors.

If you click the first icon, Incompatible HTML, you can choose to do one of the following:

1. Go To Error
2. Run Compatibility Checker
3. Schema Options

Selecting 'Go To Error' will take you to the error (pictured below). Hovering over the highlighted error will give you some additional information on the problem.

In this case, I am told that with the XHTML 1.0 Strict doctype, "target" is not permitted for the <a> tag. The target attribute is not allowed in strict doctypes which is what this site uses. If I delete it, the compatibility error disappears. Work your way through each of the errors that are shown. You can use the F9 key to go to the next error. Unsupported attributes, missing attributes, and improperly nested tags are all highlighted inline by the compatibility checker.

You could also run 'Compatibility Reports' from the 'Tools' menu. You can choose to check one page, several pages or the entire site.

Invalid HTML Code

If you click the second icon, Invalid HTML, you can choose to do one of the following:

1. Go To Error
2. Run Compatibility Checker

Selecting 'Go To Error' will take you to the error (pictured below). Hovering over the highlighted error will give you some additional information on the problem.

In this case you need to add a space and the closing forward slash <br > If you are using the default XHTML doctype, then you need to remember XHTML elements must always be closed.

Examples:

This is not correct.

<p>A line of text.
<p>A line of text.

This is correct.

<p>A line of text</p>
<p>A line of text</p>

This is not correct

<hr>
<br>

This is correct:

<hr >
<br >

If you are using the XHTML doctype, you can correct many of this type error by right clicking in Code View and selecting 'Apply XML formatting rules.'

Additional Resources on Validation:

• Validate HTML Code - HTML Code Validators
• Validate CSS Code - CSS Code Validators
• Validation Tools

NEXT STEP: Creating an Expression Web Dynamic Web Template - DWT

Copyright © 2010 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved
Written June 30, 2010