Anchors

Remember when I said that the A in the A tag stands for "anchor"? Well, there's a reason for that. By default, whenever you follow a link to a page, the browser will display the top of the page. But what if you want to link to another part of the page? What if you want to do something like this?

This can be done by creating, and linking to, anchors. Anchors are specific places within a document that can be linked to. There are two steps to this process: setting an anchor, then linking to the anchor.

Setting an anchor

You set an anchor by using the A tag, but in a slightly different way than we learned in the previous section. To set an anchor, we need to use a new attribute, NAME. Use the NAME attribute to give your anchor a name. It doesn't matter what name you give it, as long as it's different from the other anchors on your page. Here's an example:

<A NAME="anchor1">An Anchor</A>

Now that you've done this, you've created an anchor that can be linked to.

Linking to an anchor

To link to an anchor, you use the HREF attribute. You just place the anchor name (whatever you may have named it) at the end of the URL of the page you're linking to, separated from the URL by a # (pound sign). Here are some examples:

<A HREF="#pagetop">Top of page</A>

<A HREF="http://www.slumberland.org/aiweb/index.html#resourcepages">
AIWEB Resource Pages</A>

You may have noticed a difference between the two links above. The first one doesn't have a full URL before the pound sign. This is because a first link is to an anchor on the same page as the link. When you're linking to something on the same page, you don't have to include the page's full URL. Just don't forget the pound sign in the HREF, or the link won't work.

To link to the anchor we made further up on the page ("anchor1"), we'd need to create a link like this:

<P>Jump to <A HREF="#anchor1">my anchor</A>.</P>

Anchors are not something you'll need to use often, but they can come in handy for longer pages.

<<-------- p r e v // a i w e b // n e x t -------->>