Destination Anchor

Last update on: 05-14-2008
If you have a long Web page, you might want to link to a specific part of that page. You will usually want to do this when the page does not fit in the browser window and the user might otherwise have to scroll to find the relevant part of the page.

The destination anchor allows the page author to mark specific points in a page that a source link can point to.

Common examples of linking to a specific part of a page that you might have seen used on Web pages include:

�Back to top� links at the bottom of long pages
A list of contents for a page that takes the user to the relevant section
Links to footnotes or definitions

You create a destination anchor using the <a> element again, but when it acts as a destination anchor it must carry either a name or id attribute.

By way of an example, imagine that you have a long page with a main heading and several subheadings. This page does not all fit on the screen, so you want to add links to each of the main headings at the start of the document.

Before you can create links to each section of the page (using the source anchors), you have to add the destination anchors. Here you can see the subheadings of the page, each containing an <a> element with the name attribute whose value uniquely identifies that section:

For example, to create an anchor at the section of a page labeled Part 2, you might add an anchor called part2 to the heading, similar to the following:

<h1><a name="part2">Part two: Grapefruit from Heaven</a></h1>

To point to an anchor in a link, use the same form of link that you would when linking to the whole page, with the filename or URL of the page in the href attribute. After the name of the page, however, include a hash sign (#) and the name of the anchor exactly as it appears in the name attribute of that anchor (including the same uppercase and lowercase characters!), like the following:
Refer to this link to see a live example : Web browsers example

For an external anchor name in another page:

<a href="mypage.html#part2">Go to Part 2</a>

This link tells the browser to load the page mypage.html and then to scroll down to the anchor named part2. The text inside the anchor definition will appear at the top of the screen.

For an anchor name in the some page:

<a href="#part2">Go to Part 2</a>

hypertext links's lessons:

Basic Links
Linking To E-mail Addresses
Destination Anchor