A&S Web Guide

A helpful guide to web content and accessibility for the Faculty of Arts & Science, University of Toronto community.

You are here: Home / Drupal Guide / Create Anchors

Create Anchors

Anchors are an easy way to link to a specific section of a web page. You can create an anchor anywhere on a page, and then link to it from the same page or another page.

Creating an Anchor
Linking to an Anchor from the Same Page
Linking to an Anchor from a Different Page

Creating an Anchor

  1. Find the section you want to link to. Place your cursor at the beginning or end of the section’s heading.
  2. Click on the flag icon to open up the Anchor Properties dialog box.

  1. Enter a name for your anchor. The anchor name should describe the section where the anchor is placed. Not sure what to write? Use the same text as the heading.

Tip: If you are planning to link to the anchor from a different page, be sure to note the name you’ve given the anchor in the Anchor Properties dialog box – you’ll need to use it later.

  1. Click OK. A red flag will appear where your cursor was positioned. This means the anchor has been created.

Next, you’ll need to link to the anchor from the same page or a different one.

Linking to an Anchor from the Same Page

  1. Highlight the text that should link to the anchor.
  2. Click on the link icon in the tool menu (it looks like a small chain-link):

  1. In the box that pops up, click on the Link type drop-down menu and select Link to anchor in the text.

  1. In the By Anchor Name drop-down menu, select the name of the anchor you created. If you can’t find it in the drop-down list, revisit the steps above to ensure your anchor has been created.

  1. Click OK.
  2. Save your changes to the page. The link you just created will now lead to the anchor, as in this video:

Tip: Remember to test the link once you’ve saved the page to make sure it’s working properly.

Linking to an Anchor from a Different Page

You can also link to anchors from a different page. Here’s how to do that:

  1. Follow the steps in Creating an Anchor.
  2. Navigate to the page from which you want to link to the anchor.
  3. Highlight the portion of text (anywhere on the page) that you want to link to the anchor.
  4. Click on the link icon in the tool menu (it looks like a small chain-link):

  1. In the URL field, enter the relative URL of the page where you created your anchor (i.e., /page, not https://department-pat.iit.artsci.utoronto.ca/page).

  1. After the relative URL, enter a # symbol followed by the name of your anchor. It’s OK if there are spaces in the name of your anchor, but do not include spaces on either side of the # symbol.

  1. Click OK.
  2. Save the changes to your page. The link you just created will now lead to the anchor, as in this video:

Tip: Remember to test the link on your front-end page to make sure it’s working properly.