When I’m reading a blog post or a long web page, one of my favorite things to do is jump to a specific section that I want to read first. This is made possible thanks to anchor links.
Want to see what I mean? Scroll to the table of contents below. Each of the topics in the table of contents is clickable, allowing you to jump directly to that section.
Pretty cool, right? The best part about it all is that it‘s super easy to create an anchor link yourself, even if you don’t have extensive HTML knowledge. If the HTML-speak feels confusing, just follow along with the real-world examples below.
Note: If you are a HubSpot customer, follow these instructions.
Table of Contents
What is an HTML hyperlink?
What is an HTML anchor link?
External Links vs. Jump Links
Anatomy of an Anchor Link
How to Create an Anchor Link
Best Practices for Jump Links
What is an HTML hyperlink?
An HTML hyperlink is a clickable link that can be attached to any HTML element on a webpage, such as an image or text. These links can be used to direct users to other pages within your site, external websites, or even specific parts of a webpage.
Hyperlinks are created by using HTML code, which is the language used to structure your website. Strategically utilizing hyperlinks can help you enhance the user experience on your website by guiding users through your content and help them discover related information.
What is an HTML anchor link?
An HTML anchor link, also known as a jump link, is the link that takes you to a specific part of a webpage. Anchor links are especially helpful for guiding users through a long page.
A great example of this is the table of contents I mentioned above. The table of contents uses anchor links that link out to different sections of this blog post, making it easier for readers to find the exact information they’re looking for.
Allowing people to effectively “jump” to a certain part of a webpage can make your website content more engaging. It’s also important for the user experience as it makes your content more convenient and scrollable for visitors to your site — but you have to make sure you do everything just right.
Anatomy of an Anchor Link
Creating an anchor link is simple. But it’s helpful to understand which HTML elements are involved and how they all connect. These are the elements required to create an anchor link.
1. Anchor Element
The most essential HTML element of an anchor link is the anchor element tag. This is the letter “a” with angle brackets on either side. It looks like this: <a>.
When you add the anchor element, it can hyperlink to a web page, an email address, a phone number, a file, or a section of content on the same page.
2. Href
Href — which stands for hypertext reference — is an attribute that specifies the destination of a link on a web page. An href attribute is usually added to define where the anchor link should be directed.
3. ID Tag
The id tag is an identifier that defines a unique element in the HTML. In the case of anchor links, the id is used to identify the section on the page you want to link to.
When adding an id to your anchor link code, it should look something like this:
<a id=“[idenitifier goes here]”>
Want to learn more about HTML basics and CSS hacks? Download this free ebook packed with 25 tangible tips and coding templates.
How to Create an Anchor Link
Now that I’ve shared the main elements that go into an anchor link, I’ll show you how to create an anchor link on your webpage, step by step.
1. Name the object or text you want to link to.
In a normal linking scenario, whatever you need to link to has a URL of its own. However, in this scenario, you‘re not linking to a new page with its own URL — so you have to make up a name for the link’s destination.
I‘d recommend using a word or phrase that describes the link’s destination. If you use a phrase, use underscores between each word instead of spaces, otherwise the code won’t work.
Example
Let‘s say I’m writing a how-to blog post that’s packed with examples. If I wanted to link to a specific example within the post, here’s what I‘d use as my object’s name:
example_1
Now, onto the next step.
2. Insert anchor link tag.
Take the name you’ve chosen and insert it into an opening HTML anchor link tag.
In other words, replace the red section of the tag below with the name you chose in the previous step:
<a id=“INSERT_YOUR_OBJECT_NAME_HERE”>
In this case, I’ve named my object “example 1.”
Here’s how that code looks in action:
3. Add opening and closing anchor link tags.
Place that complete opening <a> tag from above before the text or object you want to link to and add a closing </a> tag after.
Doing this sets the location of the link. This is what your code should look like now:
<a id=“INSERT_YOUR_OBJECT_NAME_HERE”>The object you want to link to.</a>
4. Create the hyperlink that’ll take you to that text or object.
Now, go to the part of the post where you‘d like to have the hyperlink. You’ll need to add a typical href attribute, which indicates the destination of the hyperlink. However, in the part where you‘d typically include a URL, you’ll include the pound symbol (#) and then the name of the object you‘re linking to. Here’s what it looks like:
<a href=“#INSERT_YOUR_OBJECT_NAME_HERE”>Click here to see the content below.</a>
Here is how the full code should look once you’re done:
If you want an easy way to give this a try, try our drag and drop website builder for free.
Best Practices for Jump Links
Even though creating anchor links adds a few more steps to your process before publishing a blog post, it can make a big impact on user experience. Here are a few things to keep in mind when you’re creating your next anchor link.
Prioritize user experience.
Anchor links are designed to improve the user experience. Creating links that take you to a specific part of the page makes it much easier for users to navigate through your content and find the information they are looking for. Without the assistance of anchor links, users may end up scrolling through the page for a long time, which could lead them to bounce.
Keep the user experience top-of-mind when creating anchor links. Make sure the sections you’re linking to within a page make sense from a reader’s point of view.
Ultimately, your customers will appreciate skimmable, easy-to-read content and may be more likely to revisit your site or make a purchase because of it.
Keep organization in mind.
Anchor links can be a great way to organize a long page of content. Think about the table of contents example I mentioned earlier. A table of contents can enhance the organization of long blog posts and make it easier for readers to find what they’re looking for.
I also use jump links for glossary pages. If you have a section on your website that features hundreds of terms and definitions, adding a jump link is a great way to improve the navigation. Not only can readers skip ahead to the terms they want to learn, but jump links can help connect different terms together.
Know when to use external links.
It’s important to remember the difference between a jump link and an external hyperlink.
A jump link is a link that ‘jumps’ to a specific section of a page on your website. External links, however, are hyperlinks that direct users to a page on a different website.
It‘s a best practice to create an external link when citing information from another source. Not only does this give credit where it’s due, but it also helps users find more information about the subject they are reading about.
I Learned How to Create Anchor Links With Ease
If you work with website content at all, knowing how to create an anchor link is a must.
Even if you’re like me and don’t have any coding experience, this is one of the easiest tricks to learn. As long as you understand how the different HTML elements work together, you can add all types of jump links to your content.
In my experience, I can tell you that linking to a specific part of a page is a simple way to make your content more user-oriented. Jump links help readers find the information they need quicker, which ultimately helps them be more engaged with your content overall.
Editor’s Note: This post was originally published in July 2014 and has been updated for freshness, accuracy, and comprehensiveness.