Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Design    Internet

Linking within a page

Linking within a page is very similar to normal links. Normal links always point to the top of a page. Anchors point to a specific place within a page.

You can use an anchor link to jump to a specific position on a large HTML page. This avoids scrolling if you have a lot of information on one page.

You might want to set up a contents list near the start of your page that links to the information further down. Each chapter in the document is given a named anchor, and you put links to each of these anchors at the top of the page.

To link to an anchor you need to:

  • Create the anchor itself
  • Create a link pointing to the anchor

To create a destination anchor within your HTML at the place you want to jump to, you use the name attribute of the tag to do this. For example:

<a name="usingmh"></a><h2>Using My Help File</h2>

You can then set up a link anywhere in the page to jump to the destination. For example:

For more information, see 
<a href="#usingmh">Using My Help File</a>

Don't forget the double quotation marks and the hash sign; you need them.

When you click the link Using My Help File, you jump to the named reference, usingmh.

You can jump to a specific place on a different page in much the same way. Create an anchor in the destination HTML page and then set up the link in the source page and reference both the page name and the anchor name in the link. For example:

<p>For more information, 

see <a href="helpfile.html#usingms">Using My Help File</a>

In this case when you click the link Using My Help File, you jump to the named reference, usingmh on the page helpfile.html.

If the anchor is on a page on another server, you need to specify the full URL.

<p>For more information, see 

<a href="http://www.ann.com/helpfile.html#usingmh">
Using My Help File</a>

Note that the name value (usingmh) is case sensitive. You must use exactly the same format when you define and reference the name. Don't forget the double quotation marks and the hash sign; you need them.

If you want, you could use a graphic instead of text for the link. For more details about how to do this, see Making an picture a link.