CMS Basics: Using Link Anchors - University of Houston
Skip to main content

Using Link Anchors

Anchor IDs allow you to create a modified link which can direct a site visitor to a specific section of a webpage, allowing them to jump to the selected information quickly without having to search through the page for it. Anchor IDs can be useful either within the same page or between two separate pages

The Anchor itself is a piece of code which is placed at a chosen location on a webpage. With an Anchor ID in place, links can then be modified to jump to that location directly. 

Anchor Names (Named Anchors) were widely used in the past for the same purpose as Anchor IDs, and you might notice the CMS rewritting them automatically for you, as IDs.

Implementing Anchors

Implementing Anchor IDs involves two parts:

  1. Creating and inserting the anchor;
  2. Linking to the anchor from either the same page, or from another page.

You may need editing access to multiple pages in order to take advantage of Anchors. If you believe it would be useful to have an Anchor placed within a page for which you do not have editing permissions, you would then need to make your request to the site's content owner. Please contact either webmarketing@uh.edu or webservices@uh.edu if you need further information on locating the appropriate content owners.


Creating and inserting the Anchor

First, create the Anchor at the point on the page you will want someone to jump to.

Within the WYSIWYG editor, place your cursor in front of the item you will want to jump to, then select the Insert Anchor tool from either the Insert menu, or directly from the "bookmark ribbon" icon on the toolbar:
Named Anchors: Choose insertion point then select the Insert/Edit Anchor tool button

This will open the Insert/Edit Anchor dialog:
Named Anchors: The Insert/Edit Anchor dialog
Enter the ID (name) you want for the Anchor. Anchor IDs should not contain spaces, and should be unique within the page. You should consider Anchor names to be case-sensitive (capitalization matters).

When finished, click Ok.


A small icon will appear where the Anchor has been placed.
Note that in the page Preview, as with the final live page itself, the Anchor itself is not visible.

Named Anchors: The Anchor Icon

Finally, Publish the page and the Anchor will be available for use.


Linking to the Anchor

After the Anchor ID is in place, you are then ready to create the link which will jump to that Anchor.

You will create a link in the usual way – e.g. by highlighting the desired text and then selecting the WYSIWYG Editor's Insert/Edit Link tool from either the Insert menu or directly from the "chainlink" icon on the toolbar. 
Named Anchors: Creating a link to them

TIP: When working with links, please remember that the "broken chain link" icon is the Remove Link tool. Using this tool will remove any existing link from your selected item[s]. A caution: if you have inserted custom formatting or additional code related to the link's anchor tag, be aware that the Remove Link tool may remove those "additional instructions" as well.

When the Insert/Edit Link dialog appears, put the anchor's exact ID/name into the Anchor text field:

Named Anchors: Creating a link to them

Remember that the anchor ID here must match exactly. Capitalization, spelling, etc. matters.


If you are doing a same-page jump, you shouldn't need to do anything else here. Click Insert, Submit the page to save your changes, and then the page should be ready to Publish out.

If you are linking to a Named Anchor from a different page
(than the one where the Named Anchor has originally been created and inserted):

Within the Edit panel of the 'remote' page you would insert your link as usual, using either the internal or external linking options, making sure the link points to the page which does hold the Named Anchor itself. You will still need to put the exactly-matching anchor ID into that link's Insert/Edit Link dialog. In this page-to-page jump scenario, you should also remember to include some descriptive text in the Title field of the Insert/Edit Link dialog, to help site visitors using text readers in identifying the link's destination. When ready, both pages would need to be Published out.

 

return to top