Using the markup tree bar

The markup tree bar at the bottom of the document window provides a navigational tool that makes selecting HTML elements quick and precise, even in complex documents. The markup tree bar represents the current selection in the Layout Editor, Frame Editor, source code pane, or Outline Editor as a path or series of element tags from the root to the currently selected element. For example, with a table cell selected, the markup tree bar displays a path of tags starting with the HTML element, and then the body, table, table row, and table cell elements. When you select an element's tag in the markup tree bar, the complete element and its contents (including start and end tags) is selected in the document window and in the Source Code palette.

You can use the markup tree bar to select an element within the currently selected element--that is, at the next level lower in the HTML hierarchy. For example, you can select a table row within the currently selected table. Or, you can use markup tree bar to select an element that is outside the currently selected element--that is, at a level higher or closer to the root. For example, if a table cell is currently selected, you can select the table row or the table where the cell is located.

To select an element within an element (lower in the hierarchy):

1. Display the document in the Layout Editor, Frame Editor, source code pane, or Outline Editor.
2. Do one of the following:
• Move the mouse pointer over a tag, such as <table>, on the markup tree bar and display the context menu. (See Using context menus.) Then choose a tag from the Select Item submenu. The submenu lists all of the elements that are allowed within the currently selected element. For example, a table row (tr) element is allowed within a table element. If the selected element is at the lowest level, such as a table cell, the Select Item submenu is not listed on the context menu.
• Hold down the mouse button (or drag slowly) on a tag on the markup tree bar and then choose an element from the pop-up menu.

Using the markup tree bar to select an element within another element

To select an element outside an element (higher in the hierarchy):

Click any tag currently displayed in the markup tree bar. For example, you can select a table element directly (and all elements within the table such as its rows and cells) by clicking the table tag in the markup tree bar.

Note: The Visual Tag Editor also contains a markup tree bar that works the same way as the markup tree bar in the document window. (See Using the Visual Tag Editor.)