ACOM: Web Design Tutorial Site

Anchor links

You often see links on a web site like this one: a demonstration of anchor links. If you follow it, you may appear to have jumped to a new web page - as with many other links on this site. But look at the scroll bar to the right. It will not be located at the top, but almost at the bottom. In fact, you have "jumped" down to an anchor point located almost at the bottom of this page: the text that is there shows you exactly where the anchor is located (and if you view the source code of this page, I've also enclosed it clearly in comments.)

This kind of link is done with two <A> tags acting in conjunction. The first, the actual link itself, is in almost all ways the same as for the other link types such as internal and external links. In other words, it has text enclosed in opening and closing <A> tags, and an HREF attribute which contains the destination of the link. However, in the demonstration link given above, HREF does not contain the name of another HTML file; nor does it contain a URL. It contains the name of the desired anchor point, prefixed by a hashmark (#) character. So the link in the first line of this page is coded as follows:

     You often see links on a web site like this one:
     <A HREF="#demo">a demonstration of anchor links</A>

This tells the browser to look for a named anchor point within the current HTML file, the name of that point being "demo". And to name a point in this way, you need to use another <A> tag. It is only in this second form of the <A> tag that the HREF attribute is not required; instead we use an alternative attribute, NAME. So, further down the page can be found the following tags:

      <A NAME="demo"></A>

No text is actually being formatted here. All that is being "formatted" is a point on the page. (It's therefore a matter of dispute as to whether a closing </A> tag would be needed in this case: I put them in for completion as much as anything else, but to be really honest I don't know whether they're redundant in these circumstances or not.)

Here's another example; and this is one of the most common pieces of formatting done on web pages. For good reason too, as it's very helpful. Every web page on this site has a named anchor point at the top called, with a leap of imagination, "top". So to enable readers to immediately return to the top of any page on this site, all I need is:

     So to enable readers to immediately <A HREF="#top"> return to the top
        </A> of any page on this site, all I need is:

On longer pages it is very helpful to have several of these spaced throughout the text, as this minimises the need to use the scroll bar. Combining this with a selection of anchor points located at the top of each page, and summarising the "highlights" thereon, produces what is effectively a "table of contents" for the page. There's more (much more!) said about this in the lesson on navigation and menus, and also some discussion on the page within this lesson, on basic navigation tips.

Finally, do note that you can combine references to named anchor points with other links. There is an example in the boxed section below, where the second reference to the file subj_whatlink.cfm takes you not to the top of the page, but to the anchor point how in the middle. The second link's code reference looks like this:

      Or, you can <A HREF="subj_whatlink.cfm#how">link directly
         to the named anchor point</A> "how".

You can even do this with external links if you've seen the code or otherwise know that someone else's HTML file has named anchor points within it.

Back to the top

Back to the menu for lesson 3