Understanding Tag Specific Options

Menu:  Tools -> Options -> Text Editor -> HTML -> Formatting -> Tag Specific Options
Versions:  2008,2010
Published:  12/19/2010
Code:  vstipEdit0089

General Information

In vstipEdit0089 (https://blogs.msdn.com/b/zainnab/archive/2010/12/18/format-the-current-document-or-selection-html-designer-vstipedit0089.aspx) I showed you how do use Format Selection on a sample:

Let's say you don't like the way <DIV> tags are formatted.  You can go to Tools -> Options -> Text Editor -> HTML -> Formatting -> Tag Specific Options:

There is a LOT to this dialog so we will go though it one area at a time.  But here is a bird's eye view to help keep oriented as we go along:

Tree View

Allows you to select either the individual tag to format or a class of tags. By default, the tree contains the following nodes:

Default Settings - expand this node to set default formatting options for a complete class of tags, such as all server tags that support contents.

Client HTML Tags - expand this node to set custom formatting options for HTML elements.

ASP.NET Controls - expand this node to set custom formatting options for ASP.NET server controls.

New Tag - let's you define new tags that aren't already listed.

New Folder - allows the creation of a new node on the tree for organizing custom tags.

Delete - deletes a tag or folder.

NOTE:  In these examples, I'll be showing the <DIV> tag from "Client HTML Tags".

Per Tag Formatting

Per-tag tag formatting works on a model wherein there are default settings for each tag that provide the base rules by which the tag is formatted. There are four categories of tags, as follows:

• Client tags that do not support contents, such as br /.

• Client tags that support contents, such as table or h1.

• Server tags that do not support contents, such as asp:CheckBox.

• Server tags that support contents, such as asp:Repeater.

For each tag, the values from the appropriate category in the preceding list are used, unless an override is specified for that tag. By default, some overrides are supplied based on the common usage of the tags.

Closing tag - indicates how the closing tag should look when automatically created:

Line breaks - directs the formatting to place line breaks as specific points in the entire element:

Indent contents - will indent the contents for the element if appropriate.

Preview

The absolute BEST way to see how the Per tag formatting is going to look is to use the Preview area (bottom of the dialog).  It will update based on your choices so you can make informed decisions on the formatting.  Unfortunately it does not show color choices (described later).

Outlining in Code Editor

Enable outlining for tag - when outlining is enabled, the editor monitors the number of lines in the element, and then applies outlining to the tag when the element exceeds the specified line threshold. (The editor does not automatically collapse the tag.). This feature is useful for collapsing long elements, such as large tables.

Minimum lines - number of lines before outlining is enabled for the element.

Example:  The <DIV> has a outlining enabled and minimum lines set to three.  If it is three lines ore more then outlining will be enabled for the element.  Here it is with three lines:

Notice the outlining (the minus sign to the left of the opening <DIV> tag) that has kicked in since we have the minimum number of lines.  If the minimum lines is changed to, say, five then this is how it looks:

Outlining is not enabled since the minimum number of lines aren't there.

Per Tag Colorization

Tag foreground - the color of the text for the tags.

Tag background - the color of the text background.

Bold - makes the tags bold.

Example:  If I change the settings up like this:

Here is what the <DIV> tag looks like in the editor:

It's ugly but you get the point. :)

Finally

So, as you can see, there is quite a bit here to learn.  Take your time and explore the possibilities in this dialog.