Formatting Elements in the HTML Editor in Visual Web Developer
When you are working in the HTML designer, the editor can assist you with formatting elements. This topic describes the formatting facilities of the editor for working with markup elements.
Default Formatting
By default, the HTML editor allows you to format markup any way you like, retaining line breaks and indentation exactly as you type them. The editor includes features that assist you in formatting your elements. For example, if you indent a line by pressing TAB, subsequent lines are indented as well. You can remove a line indentation using SHIFT+TAB. The formatting you apply to your page is retained as you switch between Source view and Design view.
You can set basic options for how the editor in Source view treats tabs. For details, see Tabs, HTML, Text Editor, Options Dialog Box.
In addition, you can set options that cause the editor to automatically insert quotation marks and closing tags as you type. For details, see Format, HTML, Text Editor, Options Dialog Box.
Formatting and the Current Schema
Certain formatting options, such as capitalization and the use of quotation marks around attributes, can be overridden by the schema you select for the editor. For example, if you select the schema XHTML 1.1 Strict, the editor converts uppercase tag and attribute names to lowercase, because the schema allows only lowercase names.
Specifying Formatting Options
When you create elements, the designer formats the new element using certain options that you can set. For example, by default client elements (such as HTML tags) are created with lowercase tag names. The formatting options are applied when:
You drag controls from the Toolbox onto the page.
You use IntelliSense to create tags in Source view.
You set values in the Properties window or in property builders.
You paste an element from the Clipboard.
You generate markup using a dialog box such as the Insert Table Dialog Box in Design view.
You manually format the selection or document.
For details on how to set formatting options, see Format, HTML, Text Editor, Options Dialog Box and Miscellaneous, HTML, Text Editor, Options Dialog Box.
Formatting Options for Individual Tags
You can also set formatting options for tags individually, which allows you to customize how the HTML designer formats markup for individual tags. Tag-specific formatting allows you to set:
How the tags are closed (not closed, self-terminated, or with a separate closing tag).
Line breaks around and within tags.
How tags are indented.
Outlining options.
Colorization of tags in the editor.
For details, see Tag Specific Options.
Formatting on Demand
You can format the document or a selection at any time using the Format Document command on the Edit menu or shortcut menu. Other options available on this menu for formatting include options to convert selections to uppercase or lowercase and to convert spaces to tabs (Tabify Selection) or tabs to spaces (Untabify Selection). When you manually format, the editor uses the formatting options you have set (unless you are explicitly overriding a rule, such as when converting case). If you change the formatting options, you can apply them to existing markup by reformatting the document.
Rules for Preserving White Space
The editor's formatting process is careful to respect how HTML should render white space in the browser. The editor will therefore not change the formatting of an element if that would result in a change to how the page is rendered. You will notice this behavior in the editor particularly when working with markup that does not include spaces between tags.
For example, your page might include the following markup for two HTML buttons:
<input type="button" id="b1"><input type="button" id="b2">
When the page is rendered, the two buttons appear without any space between them. If you format the document in the editor, you might expect the two tags to be placed on their own lines. However, placing the tags on two lines would result in a space appearing between the buttons when the page renders, so the editor does not move the tags. If you manually put a space between the tags, then the formatting can change that to a line break, because the reformatting then does not affect how the buttons render in the browser.
Another common case where white-space rules override formatting is between content and the end tag. For example, your document might contain the following table element, all on one line:
<table><tr><td>Hello, World</td></tr></table>
If you reformat the document manually, the result is the following:
<table>
<tr>
<td>
Hello, World</td>
</tr>
</table>
The closing </td> tag is not moved to the next line, because that would affect how the cell is rendered. If you insert a space manually between "Hello, World" and the </td> tag and then reformat the document, the editor will move the closing tag to the next line.
Formatting Code Inline
As a rule, client script and server code in ASP.NET Web pages are formatted according to the rules for the language editor. Carriage-return behavior, new line generation, indenting, and so on are all dictated by the respective language formatter. For example, the Visual Basic language formatter automatically indents the line following a Function declaration.
In Source view, script blocks are indented one level with respect to their parent element. Inline expressions — those beginning with <%#, <%$, or <%= — are not formatted; they are left as you type them. However, if you type a block of statements individually delimited with <% %> delimiters, the editor will format the block as if it were one block using the indentation rules of the appropriate language.