When pointing webpage visitors to content further down a webpage or to a specific portion of content within a webpage, traditional anchor links remain the preferred solution. While modern browsers sometimes generate special “text highlight” links that automatically scroll to and highlight specific wording on a page, these links should generally not be used within Michigan Tech websites.
What is a Traditional Anchor Link?
A traditional anchor link brings visitors to a specific section of a webpage using a unique identifier. For example:
- Page URL: https://www.example.edu/programs/engineering/
- Anchor link: https://www.example.edu/programs/engineering/#admissions-requirements
When a visitor clicks the link that includes the anchor, the page scrolls directly to the designated section.
What is a Text-Highlight Link?
Some browsers, including Google Chrome, allow users to create links that highlight specific text on a page. These links often contain a long string similar to:
#:~:text=See%20Our%20First%20Year%20Admission%20Requirements
When opened, the browser attempts to find and highlight the matching text.
While these links can be useful for sharing content temporarily, they are not intended to serve as a website’s primary navigation system.
Why Traditional Anchor Links Are Better
Anchors are More Reliable
Anchor links point to a specifically coded section identifier that website editors control. As long as the identifier remains within the code, the link continues to work as expected.
Text highlight links depend on the exact wording appearing on the page. Even small edits to the text can cause the link to stop working entirely, therefore confusing visitors to your webpage.
Anchors Provide a Better User Experience
Anchor links move visitors directly to a section of content without relying on limited, browser-specific highlighting features. Visitors receive a consistent experience regardless of which browser or device they are using or how they access the page.
Anchors Provide Better Accessibility
Anchor links are a long-established web standard supported by assistive technologies, screen readers, browsers, and keyboard navigation.
Text highlight links were not designed as a primary navigation mechanism and may not provide a reasonable or consistent experience across all browsers and assistive technologies.
Anchors are Easier to Maintain
Website content changes frequently. When editors revise headings, update copy, or reorganize content, text-highlight links can break because they depend on matching exact text.
Anchor links are tied to section identifiers rather than paragraph wording, making them more durable during routine content updates.
Anchors Have Cleaner URLs
Anchors are customizable links that create short, readable URLs that are easy to share, remember, and troubleshoot.
Recommended Practice
Linking to Your CMS Pages
When creating links that direct visitors to content further down a webpage:
- Create a meaningful heading for the target section.
- Assign an anchor ID to that section.
- Link to the anchor using the #anchor-name format.
- Avoid using browser-generated text-highlight links as permanent website navigation.
Linking to Other CMS Pages
If you are linking to another CMS page you don’t have edit access to and need an anchor link added, contact the liaison for that site. Be sure to check the code of the page first to see if IDs were already added. If you are linking to a specific accordion (slider or FAQ), the ID code is always available.
To check the live page for an existing ID:
- Highlight the text, typically a heading, that you want to link to.
- Right-click and select Inspect.
- Make sure you are on the Elements tab.
- In the tag, such as “<h2>” or “<p>”, before the words, look for “id=”.
- You may see something like:
<h2 id=”courses”>Courses</h2> - You would add #courses to the end of the regular link.
- You may see something like:
Linking to External Pages
Linking to non-Michigan Tech (external) webpages can be more of a challenge.
Use an Existing Anchor
If you are comfortable looking at website code, check to see if an ID is available on the heading, paragraph, or element that you want to anchor to. If one is available, you can structure your external link as follows:
https://www.external-website.com/information/#existing-anchor
And it will work the same as an anchor link in our own CMS.
Link to the Main Page
If you are not comfortable with looking at website code or an ID is not available to anchor to, link to the main page without any anchors. This will ensure that your link continues to work as expected for all end users moving forward, even as the external content changes over time.