Adding HTML Page Anchors to your Website

Keith Curreri - Blog Headshot

By Keith Curreri on November 18, 2010

Page anchors are links within a webpage that allow visitors to jump to a specific place in the current page or on a separate webpage.

There are many practical uses for page anchors such as when you have a lot of information on one page and you need to allow visitors to be able to jump to the information they are looking for without having to sift through the information that they are not interested in. Another use could be for “Jump to Bottom” or “Jump to Top” links on a page.

You can view a demonstration here.

Step 1: Add an anchor to the spot that you want to jump to

Locate the spot that you want to have users jump to. Add the following line of code to that spot using an FTP editor:

<a name="anchor-name"></a>

You can change the name “anchor-name” to anything that makes sense for you.

Step 2: Add an HTML anchor link

Somewhere on your page make a link like normal. When you declare the link location use the name you gave your anchor in step 1, but add a “#” in front of the name. For example:

<a href="#anchor-name">Your Text</a>

Here “#anchor-name” is the link to your anchor, and “Your Text” is the text that the link will display on the webpage.

Linking to anchors on a different page

You can also link to an anchor from a different page. To do this just add the anchor name to the end of the “href” link path. For example:

<a href="your-page-title.html#anchor-name">Your Text</a>

Conclusion

Integrating anchors on your webpage is a great way to make your website easier to use and allow your visitors to find the information that they need quickly. Anchors are very easy to set up and you can link to anchors on completely different pages by adding a little extra code.

Did you like this post? Want to get more like it?

Website Redesign Course
Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
Mitch
12 years ago

Brilliantly taught. I had to learn this one on my own, so I know this is written well. Of course I still have to tinker here and there, but when you get it down, it’s a great thing to use.

Keith
Keith
12 years ago
Reply to  Mitch

Thanks Mitch! Anchors are great for helping users.

2
0
Would love your thoughts, please comment.x
()
x