Using Anchors to Enhance Site Navigation

By Brad Culbert

Anchors are simply a way to link to a specific section of a web page. By default when a browser follows a link it takes the viewer to the top of the page. With anchors you can specify exactly where on a page you would like your visitors to end up after clicking on a link.

Anchors are particularly useful to use in the table of contents of large web pages. They are also useful for taking visitors to particular sections of documents from another web page.

Below is a working example of anchors on a web page, followed by the code you will need to use anchors.

Link to section one
Link to section two
Link to section three

Section One

The best part about anchors is that they are reasonably simple to use. Basically it is just naming each individual part of your website and linking to that name. [Back to contents]

Section Two

You have probably seen anchors used before within large terms and conditions pages when signing up for some services on the internet. This is just one of the many places anchors are used around the web.
[Back to contents]

Section Three

Now that you have read this far, you will hopefully have an idea of how anchors are used on web pages. The next step is implementing them on your web site! [Back to contents]

Now for the code:

<H3><A NAME="contents">Table of Contents</A></H3>

<A HREF="#section1">Link to section one</A><BR>
<A HREF="#section2">Link to section two</A><BR>
<A HREF="#section3">Link to section three</A>

<H4><A NAME="section1">Section One</A></H4>
<P> The best part about anchors is that they are reasonably simple to use. Basically all it is just naming each individual part of your website and linking to that name. <A HREF="#contents">[Back to contents]</A></P>

<H4><A NAME="section2">Section Two</A></H4>
<P>You have probably seen anchors used before within large terms and conditions pages when signing up for some services on the internet. This is just one of the many places anchors are used around the web. <A HREF="#contents">[Back to contents]</A></P>

<H4><A NAME="section3">Section Three</A></H4>
<P>Now that you have read this far, you will hopefully have an idea of how anchors are used on web pages. The next step is implementing them on your web site! <A HREF="#contents">[Back to contents]</A></P>

Just to re-cap on what has just been displayed.

To create an anchor use <A NAME="xxxx">Section Heading</A> (where xxxx is a unique name for this section)
To link to an anchor use <A HREF="#xxxx">Link Text</A> (where xxxx is the unique name for the section you wish to link to)
If you wish to link to anchors within another document on your's or another website add the correct address and page before the #xxxx.

Example:

To link to a document within your site:
<A HREF="pagename.html#xxxx>Link Text</A>(where pagename.html is the name of the document you wish to link to and xxxx is the unique name for the section you wish displayed.

To link to a document within another website:
<A HREF="http://www.whatever.com/pagename.html#xxxx>Link Text</A> (where xxxx is the unique name of the anchor you wish to link to)

Return to WebmastersLibrary.com