TDX Knowledge: Make Anchor or In-Page Links

You can make an anchor link or in-page link (sometimes called a jump 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 (TOC) 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

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: Toolbar anchor icon
    • In the body of the article in TDX edit mode the anchor icon looks like a red flag: Anchor icon as it appears in a webpage
  • 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

Note: When transferring your content from a Google Doc draft into TDX, always follow the steps from Remove the Extra HTML Formatting from an Article. Otherwise, you will have to reset any anchors you'd previously created.

  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.
    Toolbar showing image, link, unlink, anchor, font awesome, and YouTube icons with anchor icon selected
  4. Enter a name for the anchor.
  5. Click OK. The anchor icon will appear where your cursor was.
    Edit mode anchor example with anchor icon and text reading "Purchasing items from UMarket"

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.
    Toolbar showing image, link, unlink, anchor, font awesome, and YouTube icons with link icon selected
  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.
    Link type pulldown menu with URL checked, Link to anchor in the text highlighted and e-mail
  5. Select your anchor link in the pulldown By Anchor Name.
    Link options with Link Info tab selected showing Display Text reading "Purchasing Items from UMarket," Link Type showing "Link to anchor in the text" and the Select an Anchor section with the By Anchor Name showing "purchasing" and "By Element Id" left blank
  6. Type (on this page) after the text in the Display Text field unless the anchor link is part of a TOC.
  7. 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. (E.g., for an anchor name using the words University Library System, you could use University_Library_System or UniversityLibrarySystem)
  • 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 "purchasing" and it's visible at the end of the URL here: https://tdx.umn.edu/TDClient/31/Portal/KB/ArticleDet?ID=7497#Purchasing
    • 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 TOC 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 TOC will be most useful to your audience.
Note: You don't need to insert (on this page) when an anchor link is in a TOC.

  • 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. 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.
    Incorrect anchor link in edit mode with anchor icon appearing before text reading "Purchasing Items from UMarket" with the linked section surrounded by a fine, dotted blue line.
  • 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.
    Pulldown menu showing list of options: Paste, Edit Anchor, 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.

Addressing the Anchor Error in HTML

  1. Switch to HTML code for the article by clicking Source.
    Source icon button from toolbar
  2. Locate the incorrect anchor in the HTML code. The code will look like this: 
    <h2><a id="Purchasing" name="Purchasing">Purchasing Items from UMarket</a></h2>
  3. Cut the code element </a> 
  4. Paste </a> after "> so your code looks like this:
    <h2><a id="Purchasing" name="Purchasing"></a>Purchasing Items from UMarket</h2>

Additional Resources

Create a Link in an Article

Last modified

Changed

TDX ID

TDX ID
5453