News GoLive Help and Tutorials HTML Help and Tutorials JavaScript Help and Tutorials Links, Files, and Resources Contact and Contribution Info
 
   
HTML Tutorial
HTML Basics : Anchors

Anchors

Okay, let me set up a little example here. Suppose you've got an HTML page (as you do), composed of perhaps a large text title, then a horizontal line, then a really long table. When someone who visits your page reads the whole table and finds themself at the bottom, they're going to want an easier way to get back to the top of the page than fiddling with scrollbars. Hence, we all see countless pages with a 'Back to Top' link at the bottom. The question is: how do you refer to a point *within* a page? We're used to using the <A HREF="page.html">Click here</A> tags to link to another page, and linking to somewhere else in the same page is luckily very similar.

To do this, you use anchors. Anchors are simply like 'markers' or 'flags' in a page which you can jump to. You put the HTML code for an anchor at the exact point you want to be able to jump to. The code for an anchor is incredibly simple, as follows:

<A NAME="anchorname"></A>

As you can see, it's exactly like the code for a normal link, except 'HREF' is replaced with 'NAME'.

NOTES:

  • You must use no spaces in the name of the anchor. So, use "topofpage", not "top of page"
  • You must NOT include a # at the beginning of the name: the reason for me saying this will become obvious in a moment.
  • This code merely creates the anchor itself: you still need to create the clickable link which jumps to the anchor, as I will show below.

As I said, you put the anchor code exactly where you want to be able to jump to. So, if you wanted to be able to jump to a point on your page just after a horizontal rule (line) <HR>, you'd use:

<HR>

<A NAME="anchorname"></A>

and so on.

Now, you must create the link to the anchor. The link is created as usual, with the normal <A HREF and so on, but with a couple of things to remember:

  • You must ALWAYS have the # character in front of the name of the anchor. ONLY put this character in the LINK TO THE ANCHOR, NOT THE ANCHOR DEFINITION ITSELF. I said this above; read the NOTES above and you'll see what I mean.
  • If the anchor is on the same page, you need only include the anchor name with the #; you do NOT need to include the page's filename, although it will work exactly the same if you do.
  • If the anchor is on a DIFFERENT page, you must include the page's filename, then the # and the name of the anchor, with NO SPACES. Examples of all this below:

EXAMPLE 1:

To link to an anchor called 'topofpage' on the SAME page as the link, use:

<A HREF="#topofpage">Back to the Top of this page</A> having defined the anchor previously as:

<A NAME="topofpage"></A> NOTE AGAIN: do NOT include the # in the definition, but ALWAYS include it in the links.

EXAMPLE 2:

To link to an anchor called 'topofpage' on a DIFFERENT page as the link, called page2.html,use:

<A HREF="page2.html#topofpage">Click here to go to the top of Page 2</A> having defined the anchor previously IN THE CODE OF page2.html, NOT THE CODE OF THE PAGE WHICH THE LINK IS ON as:

<A NAME="topofpage"></A> NOTE AGAIN: do NOT include the # in the definition, but ALWAYS include it in the links.

That's really pretty much it. So, in your table you'd simply make each word a link in the usual <A HREF= way, and create anchors on your page with the <A NAME="anchorname"></A> code to link to. That's all there is to it.

To see a working example of this, click here to go to the top of the page. Netscape's "View Source" command to see the actual code for this page's anchor if you like.

Back to HTML Basics

  
These tutorials were contributed by Matt Ridley. If you have any questions, corrections, or suggestions on how to improve it, you may email him at mattman@mattman.net. Visit his own site at http://www.mattman.net.

Matt currently works for the GoLive Technical Support Center, and regularly shares his knowledge with users of the GoLive Talk List.

Sources: Personal experience.


Back to HTML Tutorials

Design and Content ©1999 WebDawn Multimedia. View our Copyright Notice.
Send Comments and Feedback to the WebMaster.