UCSF School of Medicine - Web Resources

University of California, San Francisco

About UCSF

Search UCSF

UCSF Medical Center

School of Medicine>Information Services Unit > Web Resources Program

Information Services Unit

Web Resources

Announcements

Web Techniques

Web Worker Meetings

Training Resources

Web Style Guide

Selecting Tags

This is one of the most useful little 'secrets' in Dreamweaver. With this method, you can remove unwanted or erroneous tags, select specific objects, and select the code surrounding objects.

The tag selector in the status bar at the bottom of the Document window shows the hierarchy of tags surrounding the current selection.

Status Bar

In this case we see the paragraph tag <p>, which is nested within the table cell <td>, which is nested within the table row <tr>, which is a part of a larger table <table>. The table is contained within the <body>.

Click any tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire body of the document.

Use this method to select the link code (a href) that surrounds the back to top gif, or other images in your libraries that have code attached to them. An example follows at the bottom of this page.

Using the tag selector

You can use the tag selector to select, edit, or remove tags without leaving design/redesign view.

To select an object represented by a tag:
Click in the document.
The tags that apply at the insertion point appear in the tag selector.

Click a tag in the tag selector.
The object represented by the tag is selected on the page. In the following example, we have selected the light orange table row.

Select an Object Represented by a Tag

Tip: This is a great way to select individual table rows (tr tags) or cells (td tags).

To remove a tag:
Click in the document or select the text or object from which you wish to remove the tag. The tags that apply at the insertion point appear in the tag selector.

Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
A pop-up menu appears.

Select Remove Tag from the menu.

Remove Tag

In this case we will remove the link <a> surrounding the text.

To select an object along with its surrounding code:

Here we have selected the image tag by clicking on it. Notice that the <img> tag is bold.

Select the Image

Here we have selected the image tag along with the link surrounding it by clicking on the <a> tag. Notice that the <a> tag is bold.

Select Code

Now that you have selected the image along with its code, simply go to File > Copy or Ctrl C to copy it. Then paste it, File > Paste or Ctrl P to paste the complete element into your page.