An anchor is a named point in a page, invisible to the viewer, embedded in code. By using an <a> link you can navigate to not only a specific page, but also a specific location on that page. This is particularly useful when you have very long pages, and want to give the user the ability to navigate to a specific section (for example, in a long article or essay written on a single page).

First, you need to create an anchor point. This is achieved by adding an id attribute to the tag nearest the point your want to jump to: usually, but not exclusively, a heading element. Note that the id attribute value must be unique to that page. For example, a heading element with an id of introduction:

<h1 id="introduction" >Introduction</h1>

While almost any tag may be given an id attribute (and doing so becomes very useful for both CSS and JavaScript), no other element on this page can have an id value of introduction.

Then you need to create a link to this location. Using a standard link tag, write a link to the id attribute value you just created, with a # sign in front of it:

<a href="#introduction">Go to the introduction</a>

Note that you will need plenty of space between the link and the anchor in order to see the page move when you click on this link. The easiest and most forthright method is to enter some filler filler text between the link and its destination.

Assuming that the anchor was on a page called manual.html and you were linking from another page to the specific location of important_info in manual.html the link would be:

<a href="manual.html#important_info">Read this information first<a>

Photograph by Barry Tetchner, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.