The Tag Selector

The Tag Selector is one of the tool panels available in the bottom panel area of the main window. It displays the HTML tags surrounding the insertion point or current selection. The Tag Selector provides several useful functions:

  • It identifies the type of element in which the insertion point is located and the types of that element’s “ancestor” elements.
  • It reflects the formatting (such as font, text style, color, etc.) of the current element and its ancestors.
  • By clicking a tag in the Tag Selector, you can select an element that may be difficult or impossible to select directly in the document window.
  • By right-clicking a tag in the Tag Selector, you can quickly execute a commonly-used command on the corresponding element.

Namo Web Editor 2.environment.tag selector.new The Tag Selector

Right-clicking a tag in the Tag Selector

Namo Web Editor icon note The Tag SelectorIf an element identified in the Tag Selector belongs to a class, the class name appears inside the tag, preceded by a period. For example, if the insertion point is in a paragraph (<p> element) whose class is “blurb”, then the paragraph will appear as <p.blurb> in the Tag Selector.

To show or hide the Tag Selector
  • To show the Tag Selector
    • Click the Tag Selector tab on the bottom.
  • To hide the Tag Selector
    • Click Namo Web Editor icon panel auto hide The Tag Selector (Auto Hide) button on the top of the Tag Selector.
  • To close the Tag Selector
    • Click Namo Web Editor icon panel close The Tag Selector (Close) button on the top of the Tag Selector.
Commands in the Tag Selector’s shortcut menu

Right-click a tag in the Tag Selector to execute any of the following commands that appear in the shortcut menu. (Depending on the element, some of the commands may not be avaiable.)

  • Edit Tag: Opens the Quick Tag Editor so you can edit the HTML source code of the tag without switching to HTML mode.
  • Remove Tag: Deletes the entire element associated with the tag.
  • Custom HTML Tag: Adds a attribute to the tag.
  • View Source: Switches to HTML mode and highlights the associated element.
  • Style: Opens the Style dialog box for the associated element. If the tag already has styling (a <style> attribute is present on the tag), a check mark appears to the left of this menu item.
  • Class/ID: Opens the CSS Class/ID dialog box so you can apply a class or ID to the tag. If the tag already has a class or ID, a check mark appears to the left of this menu item.
  • HTML Reference: Opens the built-in HTML/CSS Reference to the appropriate page for the tag.
  • Properties: Opens the Properties dialog box for the associated element.

 

The Tag Selector