Linking to a specific section of a web page

In XHTML, you can link to specific parts of a document, in addition to linking to other documents. Linking to specific locations of a web page is known as reference links. Why would we consider linking to a specific part of a web document rather than a document? The former allows you to link to a specific line on a page, which is useful, for instance, when you have a big page that you want the user to navigate by clicking on certain links that are pointing to specific headings (or sections) on that page. In the latter linking approach, your link will point to just top of that huge page, not to individual sections on that page.

So reference links are used when you want the web user to see, at the very top of the browser window, some specific area of a web page. If you use a regular link instead, your destination file may not even show what you intended to show, especially when webpages are long. With reference linking, there is a potential for the web user to get the sense that the linking is not working. How? If your destination page (the file to which you are linking) is short, meaning the content of the page fits in the browser's window without vertical scroll bars, the browser can't show the specific area of your reference link as everything is fitting on the screen!

To avoid this problem, our suggestion is that you first make sure that your destination reference area can be shown at the very top of the page. If your reference point area is in the middle of the page, or at the bottom of the page (when you have fully scrolled down on the page, if there are any scroll bars), the reference point link is not suitable in this case, as again the reference point area is not at the top. (You may add more content to the bottom of your reference point area to ensure that the reference point is moved up.)

Remember regardless of the type of link used, when activated, it should immediately do something (i.e., show the destination page or reference point area at the top of page) for the user.

One of the common uses of reference links is to point links to the top of the page. For instance, when the user reaches the bottom of a page and wishes to reach to the top of the page, you may create a reference link to help. At the bottom of the page, you can create a link that reading as "Top", or "Top of the page", or a graphic with arrow up and when this link is clicked, it shows the very top of the page. If you did not provide the optional reference link for your page, the user would have to use scroll bars (or Up key from the keyboard) to reach the top. With the reference link approach, use of scrolling is no longer necessary to reach the top.

So how do you create a referece link? In two simple steps. To make a link to a specific location of a web page, follow these steps:

  1. make sure the area you want to link to is showing up on top of the page (preferably as the first line). If it is, define a reference point-this is the specific location to which the link is made. Your reference point would be defined on the top of the page.
  2. make a link to that reference point. This step creates the clickable link.

For defining the reference point in XHTML, use the name attribute with the anchor tag. Use of the name attribute to define a specific area of a web page is sometimes referred to as a named anchor. Named anchor represents the target link location. The following shows an example of creating a named anchor:

<a name="Top"></a>

Named anchor needs to be placed on the web page where you want the user to go after he/she clicks on the link. In the example above, our named anchor needs to be placed at the top of the page as our target link location is top of the page. Note this does not create a link; it only creates a reference link (or defines link target area). In fact, a named anchor is not even shown on the web page! So it is NOT something that the user will click on.

So how will our link work if the user can't see it, let alone clicking it? We need to create the actual clickable link that points to our named anchor. If you recall, links are created with the href attribute, inside the anchor tag. Instead of specifying a document (or a website address) in the href attribute, we will use our named anchor. (Note we need the named anchor created first, which we did in the first step, before the link shows its working.)

To instruct the browser you are linking to a reference point and not to a document or website, use the pound sign (#) before the named anchor. So our anchor tag will look something like this:

<a href="#Top">Top of the page</a>

This scripting syntax accomplishes our clickable linking part for step 2. See the below graphic for a summary of what we have done.

Reference point linking example

This example showed you how to link to a reference point within the same page. Many other times, you want to link to a reference point that is outside of the current web page. As with any links, a link needs to be pointed correctly to the destination source for it to work. If your link does not include the correct path or URL to the destination source, your link won't work. (Your link will also not work if the destination source named is changed, removed, or becomes unavailable).

Making a link to a section of a file outside of the current file but within the same folder

By default, if you enclose just the anchor name after the pound sign in your anchor tag, the browser searches for the destination link section within the same document. But there are times you want to link a section that is not in the current file. If, for example, you have a glossary section in your website and you want to link to a specific term from many pages, you will need to create a reference link to that term to avoid having multiple copies of the term at multiple places.

For creating reference links outside the current file but within the same folder, you will also need to know an extra piece of information: knowledge of creating links to files within the same folder. Recall (or please see this section for review) if your destination file and the source file are in the same folder, you only need to specify the destination file name in the link path of your anchor tag. To create a reference link to a section outside of the current file, specify the destination file name and then the anchor name. The following shows some examples:

  Code Description of the code Location file of the code
Example 1 <a name="xhtml_code"></a> Defines a reference point named xhtml_code page1.htm
<a href="page1.htm#xhtml_code">XHTML Code</a> Creates a clickable link to our reference point page2.htm
Example 2 <a name="myTermX"></a> Defines a reference point named myTermX glossary.htm
<a href="glossary.htm#myTermX">Term X</a> Creates a clickable link to our reference point page_b.htm

In the first example above, a link is created from page2.htm to a reference point defined in page1.htm. Rememeber the user will see no output of the reference point definition (<a name="xhtml_code"></a>) as this code does not produce any output to the screen. On the other hand, for page 2, the output for <a href="page1.htm#xhtml_code">XHTML Code</a> is simply a clickable link reading as XHTML Code. When this link is activiated, the user's browser is directed to the specific section designated as the reference point in the page1.htm file.

Making a link to a section of a file outside of the current folder

This type of reference link requires you to know how to make links to files outside of current folder as well as knowledge of making reference point links. Basically, to make such a link, simply include the relative file path (folder name(s) and file name) to the destination file having the reference point. (Access this page if you need help on linking to files outside of current folder.)