Bookmarks

Sometimes, instead of linking to a new page, you just want to link to a different part of the current page. You often see this in pages with frequently-asked questions - the questions are all listed at the top of the page, and clicking on any of these causes the browser to scroll down the page to the appropriate answer.

How to Create a Bookmark

To link to a specific part of a page, you first need to create a bookmark in the place that you want to scroll move to. There are two ways to do this - by using an anchor element, or by adding an id attribute to another element.

Using an Anchor Element

As well as using an anchor element to create a link, you can also use it to identify a specific point on a page which you want to link to:

<a id="Bookmark" name="Bookmark">
<h1>Heading to be linked to</h1>
</a>

Note that the anchor element doesn't have an href attribute in this case, just id and name attributes which identify it. This means that it doesn't link to anything else itself, but we can refer to it from elsewhere on the page.

In XHTML, the name attribute is deprecated (obsoleted). So, if you're using XHTML, or may want to do so in future, it's better just to use the id attribute (at least if you want your code to validate correctly).

The only problem with this is that some old browsers don't support the id attribute for this, and only support the name attribute. So, if you want to make sure your bookmark will work in all browsers, you may want to use both the name and id attributes, as in the example above. Browser versions which don't support the id attribute for browsers should be extremely rare though.

If you do decide to use both the id and name attributes then they should both be set to the same value. This value must begin with a letter (upper or lower case), and can then include other letters, numbers, underscores (_), hyphens (-), colons (:) and periods (.).

Usng the ID Attribute

A simpler way to create a bookmark is simply to add the id attribute to the opening tag of whichever element is at the point in the document that you want to link to:

<h1 id="Bookmark">Heading to be linked to</h1>

As discussed in the previous section, some old browsers may not support this, but these cases should be rare. Also as discussed in the previous section, the name of the bookmark must begin with a letter, and can then include other letters, numbers, underscores (_), hyphens (-), colons (:) and periods (.).

How to Link to a Bookmark

Once you have a bookmark in place, you can link to it using the anchor element. This is just like linking to another page, except that you use the name of the bookmark as the destination, precedced by the "#" character.

<a href="#Bookmark" >Link text</a>

How to Link to a Bookmark on Another Page

In some cases, you might want to link to a bookmark on another page, so that you go to that page and scroll to the right spot automatically. To do this, you simply use an anchor element which specifies both the location of the destination page, and the name of the bookmark on that page:

<a href="NewPage.html#Bookmark" >Link text</a>

<-- Previous Page

Links and Anchors

Next Page -->

Image Maps