Knowledge Base: Make Anchor or In-Page Links

You can make an anchor link or in-page link by associating an anchor with selected text on a page, and then linking it to another location on the same page. A linked table of contents is a common use of anchor links which can make lengthy or complex pages easier to scan and navigate.

Note: For the purposes of this article we will refer to this type of link as an anchor link.

This article includes:

• Making Anchor Links
  • Creating an Anchor
  • Linking to an Anchor
• Determining Anchor Names
• Making a Table of Contents
• Fixing an Incorrect Anchor Link
• Additional Resources

Making Anchor Links

There are two essential elements that make up an anchor link: the anchor itself and the link that refers to that anchor.

• The anchor is used to identify a location on a page like a pin on a map where you want to make it easy for users to navigate quickly. The anchor icon in TDX (and in many content management systems) is a flag. When viewing the content as a user, the anchor itself is hidden but still exists on the page.
  • In the TDX toolbar the anchor icon looks like a gray flag: 
  • In the body of the article in TDX edit mode the anchor icon looks like a red flag: 
• The link is the linked text that when clicked on, sends users to the location of a specific anchor.

To help keep these two elements separate in your thinking, remember that an anchor is a single location on a page that does not contain or highlight text, whereas the link will always contain text.

Creating an Anchor

1. While in edit mode in TDX, find the location in the text for your anchor.
2. Place your cursor where you want the anchor to be located.
3. Click the anchor icon (gray flag).
   Enter a name for the anchor.
   • Note: Read Determining Anchor Names for requirements and best practices.
4. Click OK. The anchor icon (red flag) will appear where your cursor was.
    

Linking to an Anchor

1. Highlight the text that you want to link to the anchor you created.
   • The text you link to should match or closely match the anchor name. 
2. Select the Link icon.
    
3. Display Text is automatically filled in with the text you highlighted.
   • Note: If you change the text in Display Text, the text in the article will also change after the anchor link is inserted.
4. Change the Link Type to Link to anchor in the text in the pulldown list.
    
5. Select your anchor link in the pulldown By Anchor Name.
    
6. Click OK.

Determining Anchor Names

Follow these guidelines when choosing the name of an anchor:

• Anchor names cannot contain spaces. If you need to use multiple words in an anchor name, use hyphens, underscores, or no spaces at all.
• Anchor names should be uniquely identifiable and as short as possible because:
  • Other editors will need to understand them.
  • They will be used at the end of URLs when users click on the anchor link. In this example the anchor name is simply "Title" and it's visible at the end of the URL here: https://service.purdue.edu/TDClient/32/Purdue/KB/ArticleDet?ID=638#Article%20Title
  • Don't use vague or generic anchor names like anchor1, anchor2, or a, b as these lack the specificity of location needed to be helpful to other editors and to the user.

Making a Table of Contents

Unless an article is exceptionally lengthy or complex, you will not need to create a table of contents with links to headings below heading level 2. In those cases, you can use your judgment as to how many levels of headings in the contents will be most useful to your audience.

• Create anchor links for H2 level headings immediately after the article's summary sentence.
• Select the group of lines that now start with an anchor icon.
• Click the bulleted list icon. 

Fixing an Incorrect Anchor Link

If you have created your anchor by highlighting text rather than placing your cursor in a single spot on the page, the anchor link will not work. 
Signs your anchor link is incorrect:

• In TDX edit mode, the header appears to be a link (is blue and changes color to red when you hover over it).
• The dotted line around the heading indicates that there is a link, but when clicked, nothing happens.
  The text you (mistakenly) highlighted when creating your anchor will appear linked, but that link will not go anywhere. 

To fix the incorrect anchor link you can either delete the anchor and recreate it, or address the error in HTML directly.

Deleting and Recreating the Anchor

1. Select the anchor link with the error by clicking anywhere within the hyperlinked text.
   • Note: When the anchor link is created with this error, you will not be able to delete it by selecting the anchor icon and backspacing or deleting it.
2. Right-click and select Remove Anchor.
3. Follow the steps for Creating an Anchor and Linking to an Anchor being sure not to highlight text when linking to your anchor.

Additional Resources

Create a Link in an Article

Still need help?  Click the 'Purdue IT Request' button to start a ticket.