Reference link

A reference link points to a specific part of a web page. How is this different from other links? Both relative links and absolute links are used for linking to other webpages. But what if you wanted to link to a special part of a webpage? What do you do? You use a reference link.

Figure 3 - Reference Point Link
Figure 3 - Reference Point Link

Figure 3 shows a common example of a reference link. The example shows that we have a link labeled as "Top" on the bottom of the page. When a user would click on this link, the web browser will show the top of the page. You might be wondering how does the browser know that it needs to show the top of the webpage? In the figure, our reference point is defined at the top of the page thus the top of the page will be shown. Conversely, you could define a reference point on the bottom of the page and create a link on the top of the page to that reference point. In this case, when you click on that link, the bottom of the page will be shown.

Now let's go over the HTML code that will create the reference link. To create a reference link, follow these two simple steps:

  1. define the reference point
  2. create your link to that reference point

So how do you define a reference point? To define a reference point on your webpage, use the anchor tag ("<a>") with the name attribute. Note that you should use a unique and a qualified name for your reference point. In other words, don't define more than one reference point with the same name on the same page; also avoid using space characters for the reference point. The following

<a name="top"></a>

defines a reference point called top. Notice there is nothing between the opening and closing tags and that's how it should be.

Now, to create a link to that reference point, use the anchor tag with the href attrinute. Recall with the href property we indicate the destination source of the link. Because with this example we want to link to a reference point on the same page, we do not need to include any filename inside the href property; instead, we include the reference point after the pound sign :

<a href="#top">Top</a>

That says link to a reference point called "top" and use the text Top as the link text.