Joe2Torials.com

Anchors

There are quite a few people who do not know how to create anchors for headings, but this tutorial will show you all just how easy it really is.

When you have a page with a lot of content on it, you don't expect the user to keep scrolling up and down the page to find the information that he/she is looking for. Wouldn't it be better if you could have links where the main headings were so that the user could click a link to be sent straight down to each main menu.

Headings as Anchors

I have created this example page so you can check out all of this code yourself. Click here for the Anchors Example Page.

By looking at the example page you can see that when you click each link it takes you down to the corresponding anchor on the page, directly to the heading of your choice. To do this you just need a simple code, a link code .... you probably already know it.

Anchor Heading Code

<a name="anchor1">anchor1</a>

This would be the code to set our heading somewhere amongst our vast amount of text. The link to these are as follows:

<a href="#anchor1" title="Anchor 1">Go to anchor 1</a>

This is our link, as you can see it is just the same name we have given to the anchor but with a # in front of it. This is the same for all anchors throughout any page. There are some people who prefer to use pagename.html#anchor1 but both ways are exactly the same.