Overview Accordion Open
Anchor links, also known as jump links and in-page links, are lists of links at the top of a page that take site visitors to a location, usually a heading, further down on the same web page.
Benefits of anchor links
When they appear at the top of a web page, anchor links act as a mini table of contents for the page, and they give site visitors a quick preview of what’s available on a comparatively lengthy web page.
Drawbacks of anchor links
Some site visitors might get confused momentarily when an anchor link takes them to a location further down on the page instead of taking them to a different web page.
Alternatives to anchor links
If the page contains many lengthy sections of information, consider breaking the page into multiple separate pages and then create a standalone table of contents page that links to each of the separate pages.
Anchor links don’t work inside of tabs! You can view an example below (on the mobile view, you’ll need to scroll to the bottom of the content to see the example).
How-To Accordion Closed
How to make an anchor link
Anchor links have two parts:
- the clickable link at the top of the page
- the section of the page that the link goes to
You might find it easier to start with the second part, creating the anchor at the right page section. Then create the link to the anchor.
Make the anchor
Open the page where you want to create an anchor link, and then
- Switch to the Text tab (not the Visual tab) of the editor on that page.
- Locate the heading for the section you want to link to.
- Within that heading, paste the following code, so it looks as shown below:
<h4 id="TYPE A UNIQUE ID HERE">HYPERLINKED TEXT HERE</h4>
- Replace the words TYPE A UNIQUE ID HERE text with text of your own that uniquely identifies that location on the page. It’s best to type something short and easy to remember. For example, for the College of Arts and Letters heading, you could do this:
<h4 id="cal">College of Arts and Letters</h4>
- Update your page in WordPress.
Make the link that goes to the anchor
Stay in the Text tab of the page editor. If you switch to the Visual tab, you will lose some work due to a bug in the editor.
Locate the section at the top of the page when you want your link to appear, and then
- Type the text that will serve as the link. Make sure it exactly matches the words in the heading that you’re linking to.
(Note: you can instead copy the heading text and paste it where you want the link.)
- Select all of the text in the link.
- Select the link button in the text editor.
- In the URL field of the window that appears, type a pound sign (#) followed by the ID of the heading you want to link to. For example, if you used
calas the ID for the heading you want to link to, type
#calin the URL field.
- Click the Add Link button in the window.
- Update your page in WordPress.
Tips for using anchor links
Make sure the destination of an anchor link is obviously the beginning of a coherent section of the page. Linking to a heading is usually best, but in some cases it can make sense to link to a something else, such as the start of a table if the table has a caption you can use as your link text.
Make sure the wording of each link in the mini table of contents is the same as the name of the heading that you are linking to.
Troubleshooting Accordion Closed
If your anchors do not seem to work as they should try:
- Make sure your ID is type correctly, it is case sensitive
- Make sure anchors are only within Header tags (h2,h3,h4,h5)
- Links should be the name of the page, www.nau.edu/yoursite/yourpage#ID if you are linking from another page
- If the page doesn’t land exactly where it should test in a Private/Incognito window
Example of anchor links
The section immediately below shows how a collection of anchor links might appear on a web page. The page contains a heading, a brief introductory sentence or two, and then a list of anchor links that serve as a table of contents for the page. Site visitors can click on an anchor link to go straight to the related section of that page.
Advisors and contacts for colleges and academic programs
Each college and graduate program has its own advisors who specialize in information about those programs. Select your program from the list below, and then contact the appropriate advisor.
- College of Arts and Letters
- College of Education
- College of Forestry, Engineering, and Natural Sciences
- College Health and Human Services
- College of Social and Behavioral Sciences
- Statewide and Online programs
- W.A. Franke College of Business
College of Arts and Letters
More explanatory text about the College of Arts and Letters goes here.
College of Education
More explanatory text about the College of Education goes here.
College of Forestry, Engineering, and Natural Sciences
More explanatory text about the College of Forestry, Engineering, and Natural Sciences goes here.
College of Health and Human Services
More explanatory text about the College of Health and Human Services goes here.
College of Social and Behavioral Sciences
More explanatory text about the College of Social and Behavioral Sciences goes here.
Statewide and Online programs
More explanatory text about the Statewide and Online programs goes here.
W.A. Franke College of Business
More explanatory text about the W.A. Franke College of Business goes here.