HTML Bookmarks

R. Craig Collins > Web Page Design > HTML Bookmarks

HTML Bookmarks © R. Craig Collins, 2005/6

As mentioned when creating links using the anchor ( <a> </a> ) tag set, one place to link to is a bookmark within a document.

Take the following scenario:

You have a long page, and when people have scrolled down to the bottom, you wish for them to be able to quickly jump to the top of the page.

XXXXXXXX
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

XXXXXXXX
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

First, you must create a bookmark... something to link to. This is done with <a name=" "></a>;
in this case, we'll name the bookmark "very-top" using <a name="very-top"></a> and place it at the top of the viewable part of the web page... just below the <body>.

<html>
<head><title> </title></head>
<body>
<a name="very-top"></a>
XXXXXXXX
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Now that we have a bookmark, now we can add a link to the bookmark. This is done with <a href=" "> </a>;
but since the link does not open a new document, we indicate that this link behaves differently by adding #,
and then the name of the bookmark.

In this case, at the bottom of the page, we add <a href="#very-top">to top</a>

Now, when someone clicks the text to top, the anchor structure around the text tells the browser to link to what ever follows the href; in this case the # tells the browser to search this page for a bookmark named very-top, and jumps to that bookmark at the top of the page.

You may place a bookmark anywhere that you would like your reader to be able to quickly jump to.

To Top