Web development, All about anchor tags

In general, most links point to a document in its entirety. When referenced in a browser, the linked document is retrieved and presented to the user, starting at the beginning of the page. For most documents, this opening makes sense because the document length is fairly short. But for long documents, where the item of interest may be far down the page, starting at the top is not useful. To make it easy to link to locations in a document other than the beginning, HTML provides a way to create identifiers within a document and to link directly to those identifiers.

Creating an identifier

The <A> tag supports the name attribute, which is used to associate a name with the contents of the tag. This name can be referenced in a link, and the browser will go right to that spot, much like the goto statement in many programming languages can jump to a label in a program.

The name may be any sequence of characters, usually enclosed in quotes. Blanks and punctuation are allowed but they make referencing the name much harder. Therefore they are not used that often. A typical identifier might look like:

  <A NAME="chapter1">Sound of Music</A>

Unlike an <A> tag with the HREF attribute, the browser does nothing special when displaying this tag. You can have them all over your document and the reader would never know. For this reason, the contents of the tag does not really matter, except that they should not be overly long. Technically, you need not have any content in the tag but some browsers will ignore the tag if there is nothing in it. To be safe, always put something in the tag.

Using an identifier

You can reference an identifier within a link by adding the identifier to a URL, preceded by a # character. For example, to reference the identifier we just created, you might say:

  <A HREF="http://server.com/

document.html#chapter1"> chapter1</A>

If the user clicks on this link, the browser will open http://server.com/document.html, search for an <A> tag defining the name chapter1, and display the document starting at that point.

Identifier references can be relative, too. If you specify a URL as nothing but an identifier name, the browser searches for that identifier within the current document. A link like this:

  <A HREF="#chapter1">chapter 1</A>

will take the user to another point in the current document. You can create a table of contents at the start of a document, with a series of links that jump to identifiers created elsewhere in the document. Rather than scrolling through a lengthy document, users can jump right to the section of interest.

Mixing and matching

It is possible, but not too common, to use both the name and HREF attributes within the same <A> tag. The browser handles this case just as you would expect: by creating a link out of the contents of the tag and allowing other links to reference that point within the document. If you have a need to create a link within an identifier, it is easier to use a single <A> tag, instead of juggling two adjacent tags.

It's worth taking a few minutes to create a couple of identifiers within a document and to practice linking to them.

<< BACK

Identifying Links with the Anchor Tag