Adding HTML Page Anchors to your Website

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.

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.