HTML Editor Tag Navigation in Visual Web Developer
The tag navigator is a representation of the element that is currently selected in the document, along with the hierarchy of parent tags to which it belongs. You can use the tag navigator to determine which element in the document has the focus. In addition, you can use the tag navigator to move from the current element to an element that is located higher in the current hierarchy. For example, you can move from a <td> tag to its parent <table> tag. The tag navigator is particularly useful for working with deeply nested structures such as tables within tables.
Displaying the Current Path
The tag navigator is displayed at the bottom of the Web page editor. The tag hierarchy is presented as a navigation path (also known as a breadcrumb) that shows the path from the currently selected tag to the outermost tag available. In Design view, the outermost tag is the <body> tag because Design view allows you to edit only the contents of the document body. In Source view, the outermost tag is the <html> tag.
The tag navigator displays all elements in the current document, including both HTML (or other) markup tags and ASP.NET Web server controls (<asp:> elements). If the element is a Web server control and has an ID attribute or Cascading Style Sheet (CSS) class, the ID or CSS class value is displayed in the tag navigator to help you distinguish it from other elements. If the tag path exceeds the width of the designer window, the list is truncated toward the parent tag, and a button is displayed that allows you to display more parent tags.
Note
The tag navigator does not display all of the elements in the current document. Instead, it shows the path from the current element to the outermost parent. To see all of the elements in the document, use the Document Outline. For details, see Document Outline Window.
Selecting Elements with the Tag Navigator
You can click a tag in the navigator to select the element that it represents. If the tag can contain content, the tag displays a drop-down list that allows you to select either the entire element or just its contents. For example, if the tag navigator displays a <td> tag, you can use the drop-down list on the tag navigator to select either the <td> element (which allows you to set properties of the element) or the content of the <td> element (which allows you to edit the contents).
The selection feature of the tag navigator is useful when performing block editing operations such as the following:
Editing tables in Source view The tag navigator makes it easy to copy the markup for a table cell (<td> element) and then copy it, move it, or delete it.
Converting ASP.NET pages into content pages for use with master pages You can use the tag navigator to select existing markup, and then copy and paste it into a Content control.
See Also
Tasks
How to: Navigate in the HTML Editor in Visual Web Developer
How to: Collapse and Expand HTML Elements in Visual Web Developer
Concepts
HTML Editor Tag Navigation in Visual Web Developer