Linking Within a Document (Web Design in a Nutshell, 2nd Edition)

11.3. Linking Within a Document

By default, when you link to a page, the browser displays the top of that page. To aid in navigation, you can use the anchor tag to link to a specific point or section within a document. This navigation technique is only effective on long documents. Linking to specific destinations in a document is a two-step process in which you place a marker in the document and give it a name, and then you make a link to that marker.

11.3.1. Naming a fragment

First, identify and name the portion of the document (called a fragment) that you want to link to. The fragment is marked using the anchor (<a>) tag with its name attribute, giving the document fragment a name that can be referenced from a link. Named anchors receive no special style treatment by default (as <a href> links do).

To illustrate, let's set up a named fragment within a sample document called dailynews.html so users can link directly to the Stock Quotes section of the page. The following anchor tag marks the Stock Quotes title as a fragment named "stocks".

<H1><A NAME="stocks">Daily Stock Quotes</A></H1>

Fragments can also be named using the id attribute in any element tag. Keep in mind that the id attribute is a newer addition to the HTML specification, so it is not supported in older browsers. In this example, the heading itself serves as a marker:

<H1 ID="stocks">Daily Stock Quotes<H1>

The value of the name and id attributes must be unique within the document (in other words, two elements can't be given the same name).

11.3.2. Linking to a fragment

The second step is to create a link to the fragment using a standard anchor tag with its href attribute. Fragment identifiers are placed at the end of the pathname, preceded by the hash (#) symbol.

To link to the "stocks" fragment from within dailynews.html, the tag would look like this:

<A HREF="#stocks">Check out the Stock Quotes</A>

11.3.3. Linking to a fragment in another document

You can create a link to a named fragment of any document on the Web by using the complete pathname. (Of course, the named anchors would have to be in place already.) To link to the stocks section from another document in the same directory, use a relative pathname as follows:

<A HREF="dailynews.html#stocks">Go to today's Stock Quotes</A>

Use an absolute URL to link to a fragment on another site, as in the following example:

<A HREF="http://www.website.com/document.html#fragment">

11.3.4. Using named anchors

Named anchors are most often used as a navigational aid by creating a hyperlinked table of contents at the top of a very long scrolling web page. Users can see the major topics at a glance and quickly get to the portions that interest them. When linking down into a long page, it is generally a good idea to add links back to the top of the page or to the table of contents.