Anchored Links-Templates and CMS - Carnegie Mellon University

Anchored Links

Anchored links were traditionally used for lengthy pages that contained a lot of content; providing links at the top that jumped to specific sections of the page allowed users to find information quickly. Over the years this practice has fallen out of favor as it became more desirable to present information in shorter, visually-scannable pages. For CMS sites, the Expand/Collapse page is a good option for organizing a page into easy-to-scan headings that expand to reveal related content.

However, there are still instances in which an anchored link is a convenient method for sending a user to an exact section on a page. As an example, anchored links can be a useful method of locating a person in an alphabetical directory. Providing alphabets at the top of the page which link to their respective section on the page makes it easier to locate a person by name. See an example of this on the Civil and Environmental Engineering Graduate Student Directory.

Creating anchored links is a two-step process.

Step One: Insert the Anchors

  1. Place your cursor just before a section on a page where you would like a link to "jump" to.
  2. Click on the Anchor icon.

    Anchor Icon
  3. Assign a relevant name to the anchor and then click on the Insert button. Note: anchor names are case sensitive so it's important to be consistent. We recommend using all lowercase letters with no spaces and no special characters such as %,#,&,@.

    Anchor Pop-Up
  4. Proceed to insert all remaining anchors throughout the page as necessary. Keep in mind that you'll need to place a uniquely named anchor at every section where you want a link to "jump" to. The anchors on your page will be visible in the edit mode only as shown in the example below. They will not be visible on your live website.

    Anchored Links
  5. Click the Submit button to save your page.

Step Two: Create the Anchored Links

Anchored links do not need to be located on the same page as where the anchors were inserted; you may link to the anchors from any page of your site.

  1. Open the page where you'd like to place an anchored link. Proceed to create an internal link as you normally would (see Links for further instructions). This link should be intended to "jump" to one of the anchors previously inserted.
  2. Depending on whether the anchor you're linking to is located on the same page you're editing or on a different page of your site, you'll need to insert the relevant information accordingly.

    When Linking to an Anchor on the Same Page

    When linking to an anchor that is located on the same page, simply enter the anchor's name, then click on Insert. Note: Be sure the anchor's name you enter matches the name you assigned to the anchor exactly, including uppercase or lowercase letters.

    Link to anchor on same page

    When Linking to an Anchor on a Different Page

    When linking to an anchor that is located on a different page, first browse to the page as you normally would when creating an internal link. Then enter the anchor's name then click on Insert. Note: Be sure the anchor's name you enter matches the name you assigned to the anchor exactly, including uppercase or lowercase letters.

    Linking to an anchor on a different page
  3. Click Submit to save the page. You may then test the links to ensure they work properly.

Absolute/Full URLs to Anchors

To determine the absolute/full URL of an anchor on a page, simply tack on the anchor name preceded by the # sign at the end of a page's URL. For example, if there's an anchor called "resources" on a page, you may link directly to the anchor using this full URL:

http://www.cmu.edu/your-site/page-name.html#resources