Introduction
All of the links we have used so far have been designed to take the user to another page or to send e-mail. This week, we will learn how to make a special type of link called an anchor. An anchor is a link that take the user to another location on the same page.
Using Anchors
Anchors consist of two parts: the anchor and the link. Before creating a link to a location, you must define that location with an anchor. Later, a link can be created somewhere else on the same page to jump to that location. This is commonly used with an anchor link at the bottom of a web page to return to the top.
To create the anchor (destination), add the code <a name="destination"> anywhere on your page to where a user might want to jump. destination can be any descriptive word, like “top” or “section4”. Note that this tag does not need to be closed; it is self-contained.
The second part is the link to that anchor. It looks similar to a regular link with one small difference: <a href="#destination">text</a>. The text is what you want the link to say, like “Go to top”. Do not forget the # — it is important; it tells the browser that this is not an ordinary link.
Practice
Open your aboutme.html assignment and try this exercise. Make a link at the top of the page that goes to the bottom of the page, and a link at the bottom of the page that takes you back to the top. Your code may look like this:
At the top of the page, just under the <body> tag, add an anchor.
<a name="top">
Then, at the bottom of the page, create a link to the anchor.
<a href="#top">Top of page</a>
Last, if you would like you can make similar tags to create a link to the bottom of the page.