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 (http://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:

image_thumb2

 

 

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:image

 

 

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:

image

 

 

 

Tree View

image

image

 

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

image

 

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:

image

 

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

image

 

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

 

 

 

Preview

image

 

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

image

 

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:

image

 

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:

image

 

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

 

 

 

Per Tag Colorization

image

 

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:

image

 

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

image

 

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.

Skip to main content