Section 11.2. Linking Within a Document

11.2. Linking Within a Document

By default, when you link to a page, the browser displays the top of that page. You may also link to a particular point in a web page (called a fragment).

Linking to document fragments is 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. You can also link to fragments in other documents (as long as they have been named).

Linking to specific destinations in a document is a two-step process in which you give an identifying name to an element and then make a link to that marker.

11.2.1. Naming a Fragment

HTML provides two ways to identify a document fragment: by inserting an anchor (a) element with the name attribute (instead of href) or by adding the id attribute to any HTML element. Both methods act as a marker that can be referenced from a link later.

XHTML documents must use the id attribute for all fragment identifiers in order to be well-structured XML. Unfortunately, the id attribute is not universally supported by all browsers for this purpose (support is lacking in Version 4 browsers). To ensure maximum backward and forward compatibility, the XHTML Recommendation suggests redundant markup using both id and name in the a element.

In this example, a named anchor is used to let users link directly to a "Stock Quotes" section of a web document called dailynews.html. First, the heading is marked up as a named anchor with the name "stocks." Named anchors receive no special style treatment by default (in other words, they are not underlined like anchors with the href attribute).

 <h1><a name="stocks" >Daily Stock Quotes</a></h1> 

The same fragment might also be identified right in the H1 element as shown here (if Version 4 browsers don't need to be supported).

 <h1 >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.2.2. Linking to a Fragment

The second step is to create a link to the fragment using a standard anchor element with its href attribute. Fragment identifiers are placed at the end of the pathname and are indicated by the hash (#) symbol (formally known as an octothorpe).

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

 <a href="#stocks">Check out the Stock Quotes</a> 

11.2.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 immediately followed by the fragment identifier. Of course, the fragment identifiers 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:

 <a href="http://www.website.com/document.html#fragment">...</a>