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 down there shows you exactly where the anchor is located (and if you view the source code of this page, I've clearly highlighted it with comments.)

This kind of link is done with two <a> tags acting in conjunction. The first, the actual link itself, is almost 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 I have given the point is "demo". To actually give a name to a point in this way, you need to use another <a> tag. This is the only circumstance in which you ever see an <a> tag without an href attribute. Instead, 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. (You can include a closing </a> tag as I've done; to be writing valid XHTML 1.0 you would at least need the slash at the end of the tag as with <br />, i.e., <a name="demo" /> is equally valid.)

WARNING!. It's easy to forget the # character, or to mix them up (placing the # character in the name attribute but not in the associated href instead of the other way round). Your anchor link won't then work as the browser will expect the contents of the href to be a file name, not an anchor point name. Although we first saw the # in the RGB colour codes, it is in fact more commonly associated with name attributes which, as we'll go on to see, have other applications in advanced HTML (see image maps and rollovers, for example). The best rule to remember is that name never takes the #. When you refer to a name from a different tag, you always need the #.

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.

Finally, do note that you can combine references to named anchor points with other links. You may or may not remember that the page subj_styles.html (the pre-reading for lecture 2) had a "table of contents", as noted above. I repeat it here. The four anchor points to which it referred are named "what", "first", "adhoc" and "cascade". But had I just left the code as it was on the original page, the browser would have looked for those named anchor points in this file. They're not here, so it would have done its best and taken me back to the top of this page. Not what was required at all.

However, if I want to jump directly to a named anchor point in a different file, I can do so by including the # and the anchor point name after the file name, for example:

<a href="subj_styles.html#adhoc">ad hoc styles</a>

Remember you still need the extension (.html) - the # comes after this. In principle, if you know that a particular external web page has anchor points in it, you can do the same with external links as well.

Anchor links are very useful and add a lot to the usability and navigability of web pages, particularly long ones. Often you see usability recommendations that you never put more than a screenful of content on one page and if that's the case, you'd never need an anchor link. But sometimes you just can't get away with writing short pithy pages (as on this site) and then they come into their own. At the very least, however, always include a "Back to the top" link at the bottom of your web pages. And now you know how to do it.

Back to the top

Back to the menu for lesson 3