Quick Tip: How to Add Anchor Links to Your Website

May 24th, 2013

how to add anchor linksWe’re sure you’ve already seen these links, for example in longer Wikipedia articles – links that quickly direct you to another location on the same page. These links are also called bookmarks or anchors. So how can you add anchor links to your Webnode website?

To keep the attention of website visitors as long as possible, we usually advise you to create more pages with shorter texts that are then divided into subpages. However, sometimes it’s not the most efficient way to distribute content, such as updated terms and conditions, FAQ, references to sources, etc. In these cases, anchor links will serve you very well.

In our tutorial, we explore inserting anchors to the Terms and Conditions of an e-shop.

How to Insert Anchors to Pages

To let visitors browse as easily as possible, we suggest you make a list of chapters before the Terms and Conditions. Basically, create a table of contents like what you can find in any book.

creating anchor links

For clarity, create a table of contents at the beginning of the page

Once you have the text ready, switch to the source code editor.

creating anchor links

Switch to the Source code

To connect links on the page, change the code to the following:

For the chapter:
<a href=”terms-and-conditions#Rates”>1. Rates</a>

For the paragraph to which you refer:
<a name=”Rates”>Rates</a>

adding anchor links

The Source code with an embedded anchor

After saving, the links are connected.

Note: “terms” before the # means that the link points to Terms and Conditions (URL: http://myeshop.webnode.com/terms-and-conditions). Don’t write anything before the hash if the anchor loads the home page (myeshop.webnode.com)!

Share your website with the new anchor links here in comments! Do you want to build your own website using a website builder? Try the step-by-step guide.