• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 3. Creating Links > Inserting and Linking to Named Anchors

Inserting and Linking to Named Anchors

When a document is long or has many sections, you may need to create a series of links that will jump the user to specific places in the document. This technique eliminates the need for the viewer to scroll through the document. A named anchor marks the place in the page to which a link jumps. In this exercise, you will insert a named anchor.

Open profiles.html from the Lesson_03_Links folder. Choose Modify > Page Properties to open the Page Properties dialog box. Set the same colors for links and visited links that you used for the intro.html document in this lesson's first exercise.

Recall the links color's hexadecimal value was #660000 and the visited-links value was #333333.

This file contains a large amount of text that requires the visitor to scroll to see the entire document.

Position the insertion point before the text “Name: Pigeon Point Light” at the bottom of the document. Click the Named Anchor button on the Common tab of the Insert bar.

The Insert Named Anchor dialog box opens.


You can also insert a named anchor by choosing Insert > Named Anchor.

Type pigeon in the Anchor Name text field; then click OK.

Don't use spaces, punctuation, or special characters (such as copyright symbols, number signs, etc.) in the name. Each anchor name must be unique. There should never be more than one anchor with the same name in the same document—the browser will not be able to jump the user to the correct anchor.

A yellow icon appears on the page to represent the anchor. The icon may be selected when it first appears on the page—selected anchor icons are blue. This icon is an invisible element that will not appear in the browser.


If you can't see the named anchor icon, make sure that the Invisible Elements option is turned on by choosing View > Visual Aids > Invisible Elements. When you insert a named anchor, a dialog box opens to warn you that you will not be able to see the anchor unless the Invisible Elements option is turned on. Named anchors must also be checked in the Invisible Elements category of the Preferences. You can check this by choosing Edit > Preferences and selecting the Invisible Elements category. The Named Anchor box should be checked.

Select the text “Pigeon Point” from the list of lighthouses at the top of the document.

This text will act as a navigational element by jumping the user to the corresponding section of the page. You will make this text a link that references the named anchor you created near the bottom of this page in the preceding steps.

Type #pigeon in the Link text field of the Property inspector.

The number sign (#) is required to tell the browser that this link is internal (will remain on the original page). Make sure that the name you type after the number sign is exactly the same as the anchor name. You should follow the naming guidelines from Lesson 1 when you name your anchors, because they are case-sensitive. For example, if you name your anchor “pigeon” and then type #Pigeon in the Link text field, your link might not work consistently in all browsers.

Pigeon Point is now linked to the Pigeon Point profile section near the bottom of the page. Now you will repeat the process for Point Cabrillo.

Add another anchor before the “Name: Point Cabrillo” text and name the anchor cabrillo.

You have created a second anchor.


If the anchor is inserted in the wrong place, you can drag it to a new position.

Select the words “Point Cabrillo” in the list of lighthouses at the top of the document. Drag the Point to File icon (located next to the Link text field in the Property inspector) to the cabrillo anchor you just made. Release the mouse button when the pointer is directly over the anchor.

The link is made. Using the Point to File icon to create links may help prevent typing errors.


You can also use the Point to File icon to link to other files in your site if the Site window is open. With the text or graphic selected that you want to link, click the Point to File icon and drag it over the Site window. The Site Window will come to the front if it is behind the document window or other panels, and you can continue to drag the mouse until you have the pointer directly over the file you wish to link to.

Insert anchors and links for the remaining navigational headings and the corresponding sections of the document. For the anchor names, type arena, reyes, bonita, and montara for their respective lighthouses.

You can edit the names of any anchors you create by clicking the anchor. The Property inspector will change to show that a named anchor is selected. You can change the name in the Property inspector's Name text field.

Insert an anchor at the very top of the page in front of the text “Profiles of Six California Lighthouses” and name it top. Select “Back to Top” at the bottom of the page and link it to #top.

In long documents, it is common practice to include links at the end of every section to a named anchor at the top of the page or to a navigational table of contents. This common anchor is usually called #top. When you use anchors in this way, users don't need to scroll back up to the top of the page if they want to continue using those links to jump to other sections. Any number of links on the page can reference the same anchor.

Save the file and preview it in the browser.

The navigational terms at the top of the page will now link to their corresponding sections. You can close the profiles.html file.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint