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
- 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
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.
- While in edit mode in TDX, find the location in the text for your anchor.
- Place your cursor where you want the anchor to be located.
- Click the anchor icon.
- Enter a name for the anchor.
- Note: Read Determining Anchor Names for requirements and best practices.
- Click OK. The anchor icon will appear where your cursor was.
Linking to an Anchor
- 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.
- Select the Link icon.
- 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.
- Change the Link Type to Link to anchor in the text in the pulldown list.
- Select your anchor link in the pulldown By Anchor Name.
- Type (on this page) after the text in the Display Text field unless the anchor link is part of a TOC.
- 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, 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.
Fixing an Incorrect Anchor Link
Important note: to test your anchor link, you'll need to be out of edit mode and must switch to view mode. If the anchor links still aren't working after checking them in the view mode, troubleshoot using the information below.
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
- 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.
- Right-click and select Remove Anchor.
- 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
- Switch to HTML code for the article by clicking Source.
- 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>
- Cut the code element </a>
- Paste </a> after "> so your code looks like this:
<h2><a id="Purchasing" name="Purchasing"></a>Purchasing Items from UMarket</h2>