Creating HTML Anchor Links

Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11 2020, you’re on the new version of the Website Builder. For help, go here.

The first example will show you how to create a Jump to Top link from the bottom of your page. The second example will show you how to create a link which will take the user from the top of the page to another specific area on the page.

Step 1: Creating the link

  1. Drag and drop the HTML Code Widget onto your page where you would like your visitor to click. For this example it will be the bottom of the page.
  2. Enter this code in the HTML Code Widget: <a href=”#Top”>Jump to Top</a>

What this bit of code is saying is: Top is the specific place on the page I want to jump and Jump to Top is the text I want the link to display.

Step 2: Marking the Spot

  1. Drag and drop the HTML Code Widget onto your page where you would like the link created in Step 1 to take your visitor. For this example it is the top of the page.
  2. Enter this code in the HTML Code Widget: <a name=”Top”></a>

What this bit of code is saying is: Here is the place named Top and a link with this place specified needs to go here.

Keep in mind that Top and Jump to Top are arbitrary. You could create a link that would go to Centre or to a specific topic on a page called News.

Here’s another example. Say you want a user to be able to jump from the top of your page to a specific area halfway down the page which discusses News.

Step 1: Creating the link

  1. Drag and drop the HTML Code Widget onto your page where you would like the text to appear. For this example it will be at the top of the page.
  2. Enter this code in the HTML Code Widget: <a href=”#News”>Read Current News Stories</a>

What this bit of code is saying is: News is the specific place on the page I want to jump and Read Current News Stories is the text I want the link to display.

Step 2: Marking the Spot

  1. Drag and drop the HTML Code Widget onto your page where you would like the link created in Step 1 to take your visitor. For this example it would be wherever the News section of the document is.
  2. Enter this code in the HTML Code Widget: <a name=”News”></a>

What this bit of code is saying is: Here is the place named News and a link with this place specified needs to go here.

Related Articles