If you're interested in adding anchor links, it's important to learn the basics of how to code in HTML. If you're unsure of how to add elements to your HTML code, send a message to firstname.lastname@example.org and we'd be happy to help setup some anchor links for you. If you're eager to give it a try yourself, read on!
First, let's briefly discuss how anchor links work.
Let's say you have a tag page called 'Prepare for an Interview'. Within that page, you have 4 sections of content, titled:
- 'Update Your Resume'
- 'Pick out a Professional Outfit'
- 'Research the Company'
- 'Practice with a Peer'
Each section has quite a bit of content in it. Rather than forcing a student to scroll through paragraphs of content just to get to the section they want, you can provide 'Anchor Links' at the top of the page, that automatically transport users to the relevant section within the same page.
Check out an example of how to add anchor links here:
In addition to the video above, we've added written instructions below:
Adding anchor links
- First, select the 'text' version of the editing window
- Locate the section of content you want a user to jump to
- In the header of that section, add in an id tag with the following format: id="sectionone" so that the end result looks like <p id="sectionone">Section One!</p>*
- Next, locate the text you want to embed the link into, so that when users click on it, they jump to the section you just ID'd.
- Embed a hyperlink, by plugging in the following format: <a href="#sectionone">View Section One</a>. The text within <a> </a> will be the linked text (the </a> ends the link).
- Save, and check out your handiwork to see it in action!
*Note: the 'p' in this section stands for 'paragraph'. It's possible to see different character identifiers here depending on the format of the text you're editing. For instance, headers could appear as 'h1' or 'h2'.