Anchor Links and How to Create Them

Anchor links are used to take visitors of your website from one place on the current page to another place of the current page. One good example is if you have a long FAQ page on your website. If you have a list of the questions towards the top of your webpage they can be anchor links to the actual part of the webpage that contains that question. It becomes much easier for your visitors to click on the link instead of having to scroll through the webpage to find the specific question.

To accomplish this, you have to “name” the part of the page and then create a <a href> link to that name you created. So let’s assume you have you have a FAQ page with a section on How to log into cPanel. We would name is like this in the code:

<a name="cpanel">How to Log into cPanel</a>

You can also assign an anchor link to element by using the id method.

<h2 id="cpanel">How to Log into cPanel</h2>

By assigning the anchor name (a name) or ID as shown in the above code, we can now reference it in our link later.

Now, let’s create the actual link to that specific section we named “cpanel”:

<a href="#cpanel">How do I log into cPanel?</a>

Notice the actual link is using the standard <a href> tag. The difference is the actual link reference. Anchor links will always follow this format <a href="#anchorname">. So now when someone clicks on the How do I log into cPanel? link, they will be taken to the reference where we placed the <a name> tag. 

If you missed our previous article, please see the Opening a new window with a link tutorial. Next we will discuss how to Hotlink or Direct link to files on the server.