XHTML Tutorial: Standards-Based Web Design

by Paul Bohman

• Links to the Index Page of a Folder or Web Site |
• Links to Email Addresses

Anchors and Same-Page Links

When you want to link to another spot on the same page, you have to create an "anchor" at the spot where you want the link to take the user. The page that you're reading right now has links at the very top (in the "contents" section) that take the user to spots further down in the document. The links are normal links, but with an added element: a "pound sign" (sometimes called a "hash"): #.

<a href="#some_spot_on_the_page">Some spot on the page</a>

Notice that the link starts with the pound sign (#) and does not include the file name, because the browser already knows what file you're on. This link tells the browser to go to the "anchor" (link destination) called "some_spot_on_the_page". But before this link will work, we have to create the anchor. If we don't create the anchor, the browser won't know where to send the user when the user clicks on the link.

You create an anchor (the link destination, meaning the location that the browser jumps to) like this:

<a name="some_spot_on_the_page" id="some_spot_on_the_page"></a>

Notice that the the "name" and the "id" are the same. We have to do this in order to make the document backward compatible with older browsers. When writing XHTML (as opposed to plain HTML, we don't actually need to include the "name" attribute at all. We could leave it off entirely, except for the fact that older browsers won't know how to interpret the anchor if we leave the name off. In fact, with XHTML, we don't even need the anchor tag at all. We just need an id to assign some element—any element—on the page. We could assign the id to a paragraph (<p id="some_spot_on_the_page">) or to an unordered list (<ul id="some_spot_on_the_page">) or to a table (<table id="some_spot_on_the_page">) or to any other element.

The problem is that this technique doesn't work with older browsers. To accommodate older browsers, we have to use the anchor tag (<a>) and give it both a name and an id, because the old system used only the name method. Some day we'll be able to stop using this old method, but not for a while, since there are still a lot of people who use older browsers, and even some of the newer browsers don't handle the id method very well.

Also notice that the anchor element is empty. There is nothing between the opening <a> element and the closing </a> element. It is ok to do this because anchors are invisible. Nobody can see them. They exist with the sole purpose of providing a destination for the link to arrive at. Can you place content within the anchor? Yes. In fact, some web professionals recommend that you do this. For the purposes of this class, though, you can leave the anchor empty. This is the most common method of creating anchors.

Some of you may have noticed that anchor elements are the same as link elements. They both are the letter "a". As it turns out, links are anchor elements. They're a special kind of anchor element that links to other anchor elements or to other spots in a web document. In other words, normal links are the anchors that you leave from. The empty anchors with name and id attributes are the anchors that you arrive at. It may be a little confusing to have both links and link destinations called "anchors," but that's the way it is.

At this point you it may be helpful to show you the code in the context of other content. Here's an example:

When the user clicks on the word "conclusion," the user will be taken to the conclusion, which is further down the page.