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
<h1 id="introduction" >Introduction</h1>
While almost any tag may be given an
id value of
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.