Controlling How Expression Web-Created Code Looks

Does it matter how the code looks? If the page looks good when viewed with a Web browser, what does it matter if the HTML code is a little sloppy?

Although the formatting and layout of the HTML don't affect the look of the finished Web page (unless the HTML contains errors, of course), you're still wise to pay attention to the tidiness of your code. Neatly written HTML is easier to update, especially if the site eventually ends up in the hands of a different administrator (who may or may not use Expression Web to update the site).

And then there's the impression your code makes. Believe it or not, a number of your visitors don't just browse your site-they peruse your code as well. A site's HTML is visible to any visitor who chooses to look. (Every browser can display a page's underlying HTML; check out your browser's Help system to find out how to do it.) Many people teach themselves to use HTML by looking at others' finished pages. Others are simply part of the "under the hood" crowd and are curious how you built your site. Either way, messy code reflects badly on its author, so it pays to keep yours clean.

Expression Web helps by generating tidy lines of code to begin with. Even so, you may want to tinker with the way Expression Web formats your code.

The Page Editor Options dialog box (available by choosing Tools Page Editor Options) contains settings that control how Expression Web outputs HTML and how Expression Web displays HTML and CSS code inside Code view. Here's a quick rundown of how you use the tabs inside this dialog box that deal with HTML and CSS output and formatting (for detailed information, turn to the Expression Web Help system):

• General: Choose how Expression Web generates particular bits of HTML in addition to the basic setup of Code view.

• Code Formatting: Control how the finished HTML and CSS looks by choosing upper-or lowercase tags and attributes, line breaks, indentation, margins, and formatting details for individual tags.

• Color Coding: Tell Expression Web how to color-code the HTML inside Code view. (Click the Code View Settings button in the upper-left corner of the dialog box.) Choose a color scheme that makes the code easiest for you to read as you work with Expression Web. The colors you choose have no effect on the finished look of the page-only how code looks inside Code view.

• IntelliSense: Set options for the Expression Web automatic HTML features.

Finally, Expression Web does last-minute code cleanup when you choose Tools Optimize HTML. You use the Optimize HTML dialog box to select redundant or useless HTML that does little more than muddle your code. After you click OK, Expression Web erases the selected items.