How to Add Anchor Links to a Page on Your Site

adding anchor links to a webpage
Written By Jake Picken

In this video, we will show you how to insert an anchor link or jump link to a page which will allow you to send that user to a specific place within that same page like a specific section or text. So, let’s get started. 

 

 

So how you will do this is with an anchor tag, which is identified by the opening <a and closing <a> in your HTML.  Inside those tags, you will include your anchor text, which is the clickable text, and you will also include the target element, which is identified with an ID. 

Let’s first look at this blog post. We added this table of contents at the top of the post, which allows users the ability to jump to the content they are interested in. This table of contents was created using jump links or anchor links. 

Let’s go and look at our blog post editor to see how we did this.  You will see these are all links and as an example when you click on Technical SEO, it brings the user down to this section with the heading for Technical SEO here. 

To see the anchor tags and id we have set up we will go to the HTML view. If you are using Sitefinity, like we are, you will find this in the top right of the editor.  Once you click on this, it will show you the HTML view of your content. 

You can see our table of contents was in a list format so the list tags are identified with the li in brackets and inside that you will see our anchor link. 

But first, let’s go down to the section we are jumping or linking to so we can show where you need to add your id. 

You will see the heading for Technical SEO here, which is within our h2 tags and then you can see we added an id that is called, “technicalseo”.  You can make this whatever you want, but just make sure it is unique and make sure this ID matches what you have in your anchor tag. 

Let’s go back up to our table of contents and you will see we have our anchor tag. Now instead of adding a link or target URL after the href here, like you would if you were sending the user to an external or internal URL, you add a hashtag (#) and then insert the ID that we added below, which was “technicalseo”. 

Now, once you added that, you can test it to see if it works and publish your page. But that should be all you need to do. If it isn’t working and you followed all the steps above, then reach out to a developer.  We did this on Sitefinity, but you should be able to do this on any content management or website builder that allows you to view and edit the HTML. 

If you have any questions, reach out to our team and give us a like and subscribe to get notified when we add new videos to our channel.