Section 8.3. Adding Bookmarks | Creating Web Sites: The Missing Manual

8.3. Adding Bookmarks

Most links lead from one page to another. When you make the jump to a new page, the browser plunks you down at the very top of the page. However, it's also possible to create links that direct the Web surfer to a specific part of a Web page. This is particularly useful if you're creating long, scrolling pages and you want to direct your visitors ' attention to a particular passage.

You can use this technique to create a link that leads to another position on the current page (see Figure 8-6), or a specific place in another Web page. Technically, this specific place where you want to send the reader is called a fragment .

Creating a link that points to a fragment is a two-step process. First, you need a way to identify that fragment. For example, imagine you want to send a visitor to the third level-three heading in a Web page named sales.htm . In order to make this work, you need to embed a marker just before that level-three heading. This marker is called a bookmark .

Figure 8-6. FAQ (frequently asked questions) pages are one of the best examples of bookmarks at work. Often, an entire FAQ is only one long page, and a table of contents at the top lets you jump to just the topic you're interested in. A FAQ could be broken into separate pages, but then readers wouldn't be able to scan through the whole list of questions in order, and there wouldn't be any way to print the entire document at once.

To create a bookmark you use the <a> anchor tag, but with a twist. You don't supply the href attribute, because this anchor won't actually lead anywhere . All you supply is a name attribute that gives your bookmark a descriptive name. It's up to you whether you put any text inside the anchortechnically you don't need to, but most people find it easier to lock the bookmark into place around a specific word or title.

Here's an example:

  <a name="Canaries">  <h3>Pet Canaries</h3>  </a>  <p>Pet canary sales have plummeted in the developed world, due in large part to currency fluctuations and other macroeconomic forces.</p>

In this example, the bookmark surrounds a heading and has the name Canaries.

Once you've created a bookmark, you can write a URL that points to that bookmark. The trick is that you need to add the bookmark information to the end of the URL. To do this, you add the number sign symbol (#), followed by the bookmark name.

For example, if you're sending the reader to a bookmark named Canaries in the sales.htm page, here's the link you'd use:

 Learn about recent developments in <a href=  "sales.htm#Canaries"  >canary  sales</a>.

When you click this link, the browser heads to the sales.htm page and scrolls down the page until the Canaries bookmark is at the very top of the browser window.

Tip: If your bookmark is near the bottom of the page, the browser might not be able to scroll the bookmark all the way to the top of the window. Instead, the bookmarked section will appear somewhere in the middle of the browser window. This occurs because the browser hits the bottom of the page, and can't scroll down any further. If you think there's some potential for confusion (perhaps because you have several bookmarked sections close to each other on the same page), you can add a few line breaks at the end of your document, which will allow the browser to scroll down further.

Sometimes you might want to create a link that points to a bookmark in the current page. In this case, you don't need to specify the page name at all. Just start with the number sign, followed by the bookmark name:

 Jump to the <a href=  "#Canaries"  >canary</a> section.

Using bookmarks effectively is an art. Resist the urge to overcrowd your pages with links that direct the reader between relatively small sections. Only use bookmarks to tame large pages that take several screenfuls of scrolling.