Walkthrough: Advanced HTML Editing in Visual Studio for Web Forms Pages

Article
07/10/2012

Microsoft Visual Studio provides a rich HTML editing experience for creating Web pages. This walkthrough introduces some of the more advanced HTML editing features of Visual Studio. For an introduction to HTML editing, see Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages.

Note

The examples in this topic are specific to ASP.NET Web Forms pages. However, you can use the HTML formatting options for markup in Web Forms pages, ASP.NET MVC (Model View Controller) views, ASP.NET Web Pages pages, and HTML pages.

Tasks illustrated in this walkthrough include the following:

Specifying options for how the HTML editor displays markup in Source view.
Selecting options so that the HTML editor that you create is compatible with specific schema (markup standards) like HTML5.
Outlining your page — that is, creating collapsible regions in the editor to reduce clutter.

Prerequisites

In order to complete this walkthrough, you need:

A basic understanding of how to work in Visual Studio.

For an introduction to Visual Studio, see Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages.

Creating the Web Site and Page

If you have already created a Web Forms project in Visual Studio (for example, by completing Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages), go to the next section. Otherwise, create a Web project and page by following these steps.

To create a file system website project

Open Visual Studio.
On the File menu, choose New Web Site.

The New Web Site dialog box appears.

Note

This walkthrough uses a website project. You could use a web application project instead. For information about the difference between these web project types, see Web Application Projects versus Web Site Projects.
Under Installed, select the programming language that you prefer to work in.
In the templates pane, choose ASP.NET Web Forms Site.
In the Location box, enter the name of the folder where you want to keep the pages of the website.

For example, type the folder name C:\WebSites.
Choose OK.
In Solution Explorer, right-click the website name, and then choose Add New Item.
Under Installed, choose the language you want to work with.
In the Templates Pane, choose Web Form.
Choose Add.

Formatting Markup

The HTML editor provides various options to help you format the markup in your pages according to your own preferences. Formatting options include the following:

Whether tag and attribute names are in uppercase or lowercase letters. You can specify options separately for HTML tags and ASP.NET Web server controls.
Whether attributes are added by enclosing them in quotation marks.
Whether the editor automatically closes elements for you. Choices include creating self-closing tags (for example, <br />), creating opening and closing tags (<p></p>), and automatically inserting closing tags.
How child elements of a tag are indented.
Where line breaks are positioned around tags.

Regardless of what formatting options you set, you have ultimate control over the layout and appearance of the markup in the editor. You can format elements manually (for example, by indenting them). The editor leaves your formatting as is unless you explicitly make a request to have the markup reformatted.

In this section of the walkthrough, you change some settings that affect how markup is displayed in the editor and see the effect of those changes. You also learn how to apply formatting to a whole page or to a selection within the page.

To add HTML elements that have default formatting options

Switch to Design view.
On the Table menu, choose Insert Table. Do not change any of the default settings in the dialog box.
Choose OK.

The designer creates an HTML table with two columns and two rows.
Below the table, click the page.
Press ENTER several times to create some blank space, and then from the HTML group in the Toolbox, drag an Image control onto the page.
Switch to Source view.

You see that the <table>and <img> elements have been inserted into the page. The <img> element is highlighted.

By default, the designer creates elements in which the tag and attribute names are lowercase and attributes are enclosed in quotation marks.

You can now change the formatting options.

To change formatting and validation options

On the Tools menu, choose Options.
Choose Text Editor, expand HTML, and then choose Validation.
In the Target list, choose HTML5.

Note

Instead of manually choosing a default schema for new pages to be validated against, you could choose Use doctype for validation schema detection. This option would instruct Visual Studio to use the page DOCTYPE declaration to determine the schema to use for validation. In this walkthrough, leave this checkbox cleared so that you can see how the choice of target schema affects how the editor works.
Choose Formatting.

The Client tag and Client attributes dropdown boxes are enabled because you selected HTML5 in the previous step. If you had left the Target setting at XHTML5, these two dropdown boxes would be set to lowercase and disabled because XHTML5 requires lowercase.

Note

You can set some options separately for specific server tags (ASP.NET server controls) and client tags (HTML elements) by choosing Tag Specific Options. You use this feature later in the walkthrough.
Set the Client tag option to Uppercase.
Clear the Insert attribute value quotes when typing and Insert attribute value quotes when formatting check boxes.
Choose OK to return the editor.

Notice that although you changed formatting options, the existing markup in the page does not change.

You can now add new elements.

To add HTML elements by using the new formatting options

In Source view, scroll to the bottom of the page.
From the HTML group in the Toolbox, drag a Table control onto the page and position it above the </form> tag.

This time, the tags in the <TABLE> element are in uppercase letters.
Below the table that you just created, position the insertion point, and then type a left angle bracket (<) to start a new tag.

A list appears in which all the tag names are offered in uppercase, because that is now the default.
Type img in lowercase.

IMG appears in the list in uppercase, reflecting the new default casing for tags.
Press the SPACEBAR.

<IMG is entered onto the page in upper case, and a list of attributes for the tag appears. The attributes are in lowercase, because when you set formatting options, you left Lowercase as the default setting for Client attributes.
Type src=.

Normally, the editor provides a set of double quotation marks after the equals sign. However, because you disabled the Insert attribute value quotes when typing option, the editor does not provide them.

Note

If you enter an attribute value in the Properties window that contains a space, the editor inserts quotation marks, regardless of the options setting.
Type Graphic.gif (a fictitious file name).

The tag now looks similar to the following:
```
<IMG src=Graphic.gif 
```
Type a slash mark (/) and a right angle bracket (>) to close the <img> tag. You can also type a space and a right angle bracket, and the editor supplies the slash automatically.

When you change formatting options, existing markup on a page is not affected. However, you can apply formatting settings manually to a page or to any part of a page.

To apply formatting to existing elements

In Source view, select the first table that you created (the one with the markup in lowercase).
On the Edit menu, choose Format Selection.

The tag names are changed to uppercase.

Note

The editor does not remove quotation marks, even if you have changed the option setting. Similarly, the editor does not change the termination of existing tags, even if you change the option for how to close tags.

When you use editing tools such as Toolbox or Properties to edit elements, the editor uses the current set of formatting options to generate the markup. However, the editor does not change any existing markup. To apply new formatting options to existing markup, use the Format Document and Format Selection commands on the Edit menu.

Setting Tag Formatting Options

The formatting options that you have worked with up to this point apply to all elements in the page. If you want, you can specify formatting options for individual tags also. This approach is useful if you frequently use certain tags and want to use nondefault formatting for them. Per-tag formatting lets you set the following options:

How the tags are closed—that is, not closed, self-terminated, or with a separate closing tag.
How line breaks are used around and within tags.
How child elements of a tag are indented.

Note

The HTML editor ignores any tag display setting that would change the way tag contents are rendered in the browser.

In this part of the walkthrough, you set several formatting options for tags. Up to this point, you have worked with HTML elements, such as the <table> element. Now, you will work with some ASP.NET web server controls, so that you can see that formatting options apply equally to controls and elements.

You will start by setting some options that apply to all tags of a certain type. You can set options for the following types of elements:

HTML elements that do not have content, such as br and input.
HTML elements that can have content, such as table and span.
Server elements (asp:) that cannot have content, such as asp:image.
Server elements that can have content, such as asp:textbox.

Security Note
A TextBox control accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

For the first part of this section, you add an HTML table. You then change the rules for tag formatting for table elements and reformat the document to see the effect of changing the formatting rules.

To set tag-formatting rules for an HTML table

In Source view, in a blank part of the window, right-click, and then choose Formatting and Validation.

Note

The Formatting and Validation command is available only in Source view.

The Options dialog box appears with the options for formatting that you set in the preceding section.
In the Client Tag list, choose Lowercase to reset the formatting for client tags.
Choose OK to close the Options dialog box.
From the HTML group in the Toolbox, drag a Table control onto the page in Source view.

The editor creates a <table> element that has three rows (<tr> elements) and three cells (<td> elements) in each row. Each tag is on a separate line:
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
In a blank part of the window, right-click, and then choose Formatting and Validation.
Choose Tag Specific Options.
Expand Default Settings.

A list of tag types appears, starting with Client tag does not support contents. Under Default Settings, you can set different options for client and server elements, for elements that have content (such as a table element), and for elements that do not (such as an img element).
Choose Client tag supports contents.

Notice that the default setting is that tags use a separate closing tag and that the tags have line breaks before, within, and after the tag.
Expand Client HTML tags.
Choose td.

You will set options to change how td tags are formatted.
In the Line breaks list, choose None.
Choose OK to close the Tag Specific Options dialog box, and then choose OK to close the Options dialog box.
On the Edit menu, choose Format Document.

The document is reformatted. The <td> tags in the table that you added are placed in a single line:
```
<table>
    <tr>
        <td>&nbsp; </td><td>&nbsp; </td><td>&nbsp; </td>
```

Now you will work with tag-specific options for an ASP.NET server control.

To set formatting options for an ASP.NET server control

Switch to Design view.
From the Standard group in the Toolbox, drag a ListBox control onto the page.
In the ListBox Tasks dialog box, choose Edit Items.

The ListItem Collection Editor dialog box appears.
Choose Add two times to add two items.
Under Members, choose the first ListItem, and then under ListItem properties, set Text to Item 1.
Under Members, choose the second ListItem, and then under ListItem properties, set Text to Item 2.
Choose OK to close the ListItem Collection Editor dialog box.

Switch to Source view.

Notice that the control has been formatted in the following manner:

<asp:Listbox ID="ListBox1" runat="server">
    <asp:ListItem>Item 1</asp:Listitem>
    <asp:ListItem>Item 2</asp:Listitem>
</asp:Listbox>

In a blank part of the window, right-click, and then choose Formatting and Validation.
Choose Tag Specific Options.
In the Tag Specific Options dialog box, choose ASP.NET Controls, and then choose New Tag.
In the Tag name box, type asp:listitem.

Do not type the right and left angle brackets (< and >) as part of the tag name.

You are setting options for the asp:ListItem element that is used inside a ListBox control. You are not setting options for the asp:ListBox element, because you want to control how the contents (children) of the asp:ListBox element are formatted.
Choose OK to close the New Tag dialog box.
In the Line breaks list, choose None.

This option causes the control to have no line breaks in it.
Choose OK to close the Tag Specific Options dialog box, and then choose OK to close the Options dialog box.

You can now see the effect of your new formatting options.

To add an ASP.NET server control by using the new formatting options

Switch to Design view.
From the Standard group in the Toolbox, drag a second ListBox control onto the page.
On the ListBox Tasks menu, choose Edit Items.
For the ListBox control, create two items as you did in the preceding procedure.
Switch to Source view.

Notice that the <asp:ListItem> elements are all on one line. (If tag wrapping is set to the default of 80 characters, they will be on two lines. You can modify this value in the Options dialog box.)

Although you worked with only two controls and changed only one formatting option (line breaks), you can apply options to any element in the same way.

Outlining Elements

In Source view, you can outline elements (collapse and expand them) so that they are out of your way. This feature is particularly useful for elements such as tables, which often take up a lot of space. You can use the collapse feature for any element on the page.

To outline elements

Select one of the tables that you added earlier.
On the Edit menu, point to Outlining, and then choose Hide Selection.

The <table> tag is collapsed and a plus sign (+) is displayed in the margin.
Choose the plus sign to expand the table element.

You can also configure elements so that the plus (+) and minus (-) signs appear automatically in the margin when the elements exceed a certain size.

To configure how elements are outlined automatically

Right-click the page, choose Formatting and Validation, choose Formatting, and then choose Tag Specific Options.
In the Tab Specific Options dialog box, expand Client HTML tags, and then choose table.
Under Outlining in code editor, in the Minimum lines box, confirm that the value is set to 5 (the default setting).
Choose OK, and then choose OK.

For existing tables and any new tables that are added, outlining appears automatically if the table exceeds five lines.

Validating HTML

The HTML editor can validate your HTML or make sure that it complies with the rules for specific browsers or standards, such as XHTML5. For example, the editor can find tags and attributes not accepted by XHTML 1.1 or that do not comply with HTML5 standards.

In this part of the walkthrough, you work with different schemas and introduce some small errors to see how the editor flags them.

To test validation in the editor

On the HTML Source Editing toolbar, in the Target Schema for Validation list, choose HTML 4.01.
Scroll to the bottom of the page.
Inside the </form> tag, type the following HTML:
```
   <font face=arial>
   <a href=Default.aspx >Default Page </a>
   </font>
```
As you type, Microsoft IntelliSense technology provides assistance in completing the tags.
On the HTML Source Editing toolbar, in the list, choose XHTML5.

After a short pause (because validation is performed as a background task), you see squiggly lines underneath various parts of the tags. Like a spell checker, the HTML validation feature finds markup in your page that is not acceptable for the currently selected schema.
In the <font> tag, rest the mouse pointer over the word font.

A ToolTip informs you that the currently selected schema does not support the font element. The preferred standard is to use cascading style sheet styles for text formatting. For example, <span style="font-family:Arial;"></span>.
In the href attribute of the <a> tag, rest the mouse pointer over Default.aspx.

A ToolTip informs you that in the current schema, you have to enclose attributes in quotation marks.
Enclose Default.aspx in quotation marks.

The value for the href attribute is no longer underlined.
In the line below the HTML you are working with, type <fo.

The IntelliSense drop-down list appears, but this time it does not offer font, because the font element is not valid in XHTML schemas.
Delete the right angle bracket (<).

Setting Validation Options

You can control which errors validation shows you. This option is useful if you want validation to report certain types of errors, even if a particular schema allows them.

To set validation options

In Source view, right-click anywhere in the page, and then choose Formatting and Validation.
In the Options dialog box, choose Validation.

Notice that regardless of whether you select or clear the Show errors check box, the error display for check boxes is not enabled. This option is not enabled because the current schema is XHTML, which already shows you all possible validation errors.
In the Target list, choose HTML5.
Make sure that the Show errors check box is selected, and then under Show errors, select all check boxes.
Choose OK to return to the editor.
Select the <font> markup that you entered previously.
On the Edit menu, select Advanced, and then choose Make Uppercase.

After a brief pause, the tag names are underlined. When you rest the mouse pointer over HREF, a ToolTip indicates that the name contains uppercase letters. HTML5 allows for uppercase tag names, but you now see this validation error because you have chosen to be warned when tags are not in lowercase.

More about validation

Validation can find many other types of errors, such as duplicated control IDs, crossed opening and closing tags like <b><i></b></i>). However, validation in the editor does not prevent you from creating any HTML code that you want. Validation just identifies markup that does not comply with the rules for the specified schema.

A rendered ASP.NET page contains both the HTML elements that you added, and the HTML that ASP.NET server controls and your application code produce. Validation cannot examine the output of those dynamic elements; that is, the editor cannot examine the validity of generated output.

Next Steps

This walkthrough has introduced you to some of the more advanced features of the HTML editor. Although the walkthrough did not illustrate every feature, you have seen how formatting options, outlining, and validation can help you produce well-formed, custom-formatted markup.