Anchors

Discussion

Anchors provide the core function of hypertext, and understanding how they work is vital if we are to use them well.

Anchors provide the links between one web page and another and between parts of the same page. Anchors are often referred to as links and this is not wrong, but the word "anchor" is carefully chosen because their job is to fix points at each end of the link. One end says "it's this way"; the other says "here it is".

Like road signs pointing to a village, there can be many links pointing the way, guiding visitors arriving from any direction. And while there is no limit to the number of pointers, each destination is unique, so that one end of the anchor may serve as the destination for thousands of links or just one.

Anchors can be one-way or two-way and we build them slightly differently to suit either requirement.

Anchor anatomy

An anchor is an inline tag and is usually wrapped around text—to create a link which can be selected by the visitor or to create a target for a link. The anchor has an opening and closing tag, <a></a>, and between these can be included any other inline element except another anchor. The usual rules about nesting elements apply to anchors.

The opening tag of the anchor (<a>) is given attributes which tell it what to do. We use the href attribute to direct the anchor to a destination (or target) and the id and/or name attributes to create the target itself.

The href

The href attribute is where we tell the anchor where we want it to point. In a link to a page in the same location as the current one (such as this page) we might build our anchor like this:

The value given to the href attribute is the URL of the target we want it to point to, so of course we need to know that address in order to include it in the anchor. The URL (or URI) might be for a page on the same site, or an external address for a page on another site, or it might be a specific location within another page or within the same page.

Notice that the text which will become the hypertext link is between the opening and closing tags of the anchor element. Also notice that the attribute value is in quotes.

The value of the href might be short and simple or it may be long an complicated, sometimes very long.

Anchor links are active in that they require an object to link to. An anchor link which no longer points to the thing it was intended to find is said to be "broken".

The target

When we are linking to another page, it is enough to simply point to that page. There is no requirement for any special code on that page, it is enough that we point to it.

But to allow a link to find something specific on a page, such as a heading, we first need to identify the heading somehow as the target for our link. We do this by adding an anchor tag to the heading, and we use the id and name attributes in the anchor tag, like this:

Whatever value we choose for the id and name it should be the identical. And, just as it would be troublesome if two houses in the same street were numbered the same, each anchor on the same page must be given a different value, unique within that page.¹

Once any item has been identified in this way we can address that specific anchor from within the same page or from anywhere else in the world. Combined with the URL of the page (including the URL of the web site) it is a location absolutely unique in the world.

A target anchor is passive and there is no requirement that it be linked to from anywhere. Only if a target anchor which is linked to is removed or changed can it be the cause of a broken link.

Other attributes

If we want the link to open the page in a new browser window we can add another attribute to the opening tag like this:

which tells the user's browser to open the link in a blank window. There are several such commands, but this is not the place to list them all.²

Technique

Links within the page

When we want to link from one part of a page to another, we use a pair of anchors. We might do this when creating a contents list or a footnote or when referring to a previous or later section of the document.

One part of the pair acts as the pointer and the other is the target:

To take our earlier example of a heading with an anchor:

linking to this from within the same document, we would use an anchor formed like this:

Note the octothorp (#) inside the quote mark at the start of the anchor's href value. This is essential. It says in effect "find the place in this document with a name or id value which matches this text".

In other words, the href—the bit of the referring anchor which says "go this way"— finds the target anchor which has an id value and/or name value which matches the text after the octothorp (#) mark.

Reciprocal anchors

It is often useful to make internal anchors reciprocal, so that the link works either way. This is particularly useful when setting footnotes and contents lists.

We do this by setting up each end of the link so that the href component of each anchor points to the id and name components of the other anchor.

When creating reciprocal-link pairs it is convenient to stick to a naming scheme such that the value of the referring anchor is suffixed with "ref", for example.

Also, note that there is nothing to stop us linking many times to either member of the pair—from elsewhere in the document or from outside it.

Links within the site

To create a hypertext link to a page in the same directory on the same site, such as this page, we write a relative URL with code like this:

We can combine this link with a link to an internal anchor, so that we can address a specific part of a page:

This says in effect "open this document and then find the place in the document with a name or id value which matches this text".

(Creating relative links to pages in other directories on the same site is more complicated and will be discussed later.)

External links

Of course we often need to link to other sites and external documents, and this is done using anchors which use the full internet address of the site or page (the absolute URI).

A link to a site would look like this:

While a link to a specific document on a the site (such as this page) might look like this:

Note that after the "href" comes "http://". This is the protocol for the following URI—in other words it tells the browser what to do with the address. If there is no protocol the user's browser assumes the address is for a document on the same server and the URI may not work correctly.

When dealing with URIs from a variety of sites it will be noticed that some are concise and clear while others are long and complex. This is itself makes no difference to how it should be treated. However, there are some things which do need to be checked if we are to maintain good compliant code.

URIs must not include any characters other than those in US-ASCII, nor can they include "&" unless it is in the form &. Again, this is a case where easy-going software will tolerate bad characters and ampersands in URIs but we have higher standards and require our pages to validate, so we must encode these characters as we would if they appear anywhere else in the text.

Of course, just like the earlier example, we can combine this link with a link to an internal anchor, so that we can address a specific part of this page from anywhere in the world:

This says in effect "open this document and then find the place in the document with a name or id value which matches this text".

Mail links

Sometimes we would like create a link which will prompt the user's mail client to make a new blank email, complete with an address ready in the To: field.

To do this we use an anchor with a specific format. For instance, to create a mail link like this: mail info we use the usual "href" attribute but we need to also put "mailto:" and the email address:

Note the colon (:), without which this link will not work.

The biggest problem with putting mail links on web pages is that they can act as magnets for unsolicited mail, sadly much of it highly offensive. There are methods which will help alleviate the problem but no method is perfect.

Validate: XHTML CSS

This page was last updated when I had time.

All material in this web site which was originally created by me is © Philip King 2003 and licensed under a Creative Commons License.

These pages hosted by GreenNet.