Linking to Specific Places Within Documents

The links you've created so far today have been from one point in a page to another page. But what if, rather than linking to that second page in general, you want to link to a specific place within that pagefor example, to the fourth major section down?

You can do so in HTML by creating an anchor within the second page. The anchor creates a special element that you can link to inside the page. The link you create in the first page will contain both the name of the file to which you're linking and the name of that anchor. Then, when you follow the link with your browser, the browser will load the second page and then scroll down to the location of the anchor (Figure 5.10 shows an example).

Figure 5.10. Links and anchors.

Anchors are special places that you can link to inside documents. Links can then jump to those special places inside the page as opposed to jumping just to the top of the page.

You can use links and anchors within the same page so that if you select one of those links, you jump to a different anchor within the page. For example, if you create an anchor at the top of a page, you could add links after each section of the page that return the user to the top. You could also create anchors at the beginning of each section and include a table of contents at the top of the page that has links to the sections.

Creating Links and Anchors

You create an anchor in nearly the same way that you create a link: by using the <a> tag. If you wondered why the link tag uses an <a> rather than an <l>, now you know: a actually stands for anchor.

When you specify links by using <a>, the link has two parts: the href attribute in the opening <a> tag and the text between the opening and closing tags that serve as a hot spot for the link.

You create anchors in much the same way, but rather than using the HRef attribute in the <a> tag, you use the name attribute. The name attribute takes a keyword (or words) that name the anchor. Figure 5.11 shows the parts of the <a> tag when used to indicate an anchor.

Figure 5.11. The <a> tag and anchors.

Including text between the anchor tags is optional. The actual anchor is placed at the location of the opening anchor tag, so you can just as easily write it as

<a name="myanchor"></a>

The browser scrolls the page to the location of the anchor so that it's at the top of the screen.

For example, to create an anchor at the section of a page labeled Part 4, you might add an anchor called part4 to the heading, similar to the following:

<h1><a name="part4">Part Four: Grapefruit from Heaven</a></h1>

Unlike links, anchors don't show up in the final displayed page. They're just a marker that links can point to.

To point to an anchor in a link, use the same form of link that you would when linking to the whole page, with the filename or URL of the page in the href attribute. After the name of the page, however, include a hash sign (#) and the name of the anchor exactly as it appears in the name attribute of that anchor (including the same uppercase and lowercase characters!), like the following:

<a href="mybigdoc.html#part4">Go to Part 4</a>

This link tells the browser to load the page mybigdoc.html and then to scroll down to the anchor named part4. The text inside the anchor definition will appear at the top of the screen.

Task: Exercise 5.4. Linking Sections Between Two Pages

Now let's create an example with two pages. These two pages are part of an online reference to classical music, in which each web page contains all the references for a particular letter of the alphabet (a.html, b.html, and so on). The reference could have been organized such that each section is its own page. Organizing it that way, however, would have involved several pages to manage, as well as many pages the readers would have to load if they were exploring the reference. Bunching the related sections together under lettered groupings is more efficient in this case. (Lesson 16, "Writing Good Web Pages: Do's and Don'ts," goes into more detail about the trade-offs between short and long pages.)

The first page you'll look at is for M; the first section looks like the following in HTML:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Classical Music: M</title> </head> <body> <h1>M</h1> <h2>Madrigals</h2> <ul>  <li>William Byrd, <em>This Sweet and Merry Month of May</em></li>  <li>William Byrd, <em>Though Amaryllis Dance</em></li>  <li>Orlando Gibbons, <em>The Silver Swan</em></li>  <li>Claudio Monteverdi, <em>Lamento d'Arianna</em></li>  <li>Thomas Morley, <em>My Bonny Lass She Smileth</em></li>  <li>Thomas Weelkes, <em>Thule, the Period of Cosmography</em></li>  <li>John Wilbye, <em>Sweet Honey-Sucking Bees</em></li> </ul> <p>Secular vocal music in four, five and six parts, usually a capella. 15th-16th centuries.</p> <p><em>See Also</em> Byrd, Gibbons, Monteverdi, Morley, Weelkes, Wilbye</p> </body> </html>

Figure 5.12 shows how this section looks when it's displayed.

Output

Figure 5.12. Part M of the Online Music Reference.

In the last line (the See Also), linking the composer names to their respective sections elsewhere in the reference would be useful. If you use the procedure you learned earlier today, you can create a link here around the word Byrd to the page b.html. When your readers select the link to b.html, the browser drops them at the top of the Bs. Those hapless readers then have to scroll down through all the composers whose names start with B (and there are many of them: Bach, Beethoven, Brahms, Bruckner) to get to Byrda lot of work for a system that claims to link information so that you can find what you want quickly and easily.

What you want is to be able to link the word Byrd in m.html directly to the section for Byrd in b.html. Here's the relevant part of b.html you want to link. (I've deleted all the Bs before Byrd to make the file shorter for this example. Pretend they're still there.)

Note

In this example, you'll see the use of the <em> tag. This tag is used to specify text that should be emphasized. The emphasis usually is done by rendering the text italic in Netscape and Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Classical Music: B</title> </head> <body> <h1>B</h1> <!-- I've deleted all the Bs before Byrd to make things shorter --> <h2><a name="Byrd">Byrd, William, 1543-1623</a></h2> <ul>  <li>Madrigals   <ul>     <li><em>This Sweet and Merry Month of May</em></li>     <li><em>Though Amaryllis Dance</em></li>     <li><em>Lullabye, My Sweet Little Baby</em></li>   </ul>  </li>  <li>Masses   <ul>     <li><em>Mass for Five Voices</em></li>     <li><em>Mass for Four Voices</em></li>     <li><em>Mass for Three Voices</em></li>   </ul>  </li>  <li>Motets   <ul>     <li><em>Ave verum corpus a 4</em></li>   </ul>  </li> </ul> <p><em>See Also</em> Madrigals, Masses, Motets</p> </body> </html>

You'll need to create an anchor at the section heading for Byrd. You then can link to that anchor from the See Alsos in the file for M.

As I described earlier today, you need two elements for each anchor: an anchor name and the text inside the link to hold that anchor (which might be highlighted in some browsers). The latter is easy; the section heading itself works well because it's the element to which you're actually linking.

You can choose any name you want for the anchor, but each anchor in the page must be unique. (If you have two or more anchors with the name fred in the same page, how would the browser know which one to choose when a link to that anchor is selected?) A good, unique anchor name for this example is simply byrd because byrd can appear only one place in the file, and this is it.

After you've decided on the two parts, you can create the anchor itself in your HTML file. Add the <a> tag to the William Byrd section heading, but be careful here. If you were working with normal text within a paragraph, you'd just surround the whole line with <a>. But when you're adding an anchor to a big section of text that's also contained within an elementsuch as a heading or paragraphalways put the anchor inside the element. In other words, enter

<h2><a name="byrd">Byrd, William, 1543-1623</a></h2>

but do not enter

<a name="byrd"><h2>Byrd, William, 1543-1623</h2></a>

The second example can confuse your browser. Is it an anchor, formatted just like the text before it, with mysteriously placed heading tags? Or is it a heading that also happens to be an anchor? If you use the right code in your HTML file, with the anchor inside the heading, you avoid the confusion. The easiest answer is probably just putting the anchor ahead of the heading tag, like this:

<a name="byrd"></a> <h2>Byrd, William, 1543-1623</h2>

If you're still confused, refer to Appendix B, "HTML 4.01 Quick Reference," which has a summary of all the HTML tags and rules for which tags can and cannot go inside each one.

So, you've added your anchor to the heading and its name is "byrd". Now go back to the See Also line in your m.html file:

<p><em>See Also</em>  Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye</p>

You're going to create your link here around the word Byrd, just as you would for any other link. But what's the URL? As you learned previously, pathnames to anchors look similar to the following:

page_name#anchor_name

If you're creating a link to the b.html page itself, the HRef is as follows:

<a href="b.html">

Because you're linking to a section inside that page, add the anchor name to link that section so that it looks like this:

<a href="b.html#byrd">

Note the small b in byrd. Anchor names and links are case sensitive; if you put #Byrd in your href, the link might not work properly. Make sure that the anchor name you use in the name attribute and the anchor name in the link after the # are identical.

Caution

A common mistake is to put a hash sign in both the anchor name and in the link to that anchor. You use the hash sign only to separate the page and the anchor in the link. Anchor names should never have hash signs in them.

So, with the new link to the new section, the See Also line looks like this:

<p><em>See Also</em>  <a href="b.html#byrd">Byrd</a>,  Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye</p>

Of course, you can go ahead and add anchors and links to the other parts of the reference for the remaining composers.

With all your links and anchors in place, test everything. Figure 5.13 shows the Madrigals section with the link to Byrd ready to be selected.

Figure 5.13. The Madrigals section with a link to Byrd.

Figure 5.14 shows the screen that pops up when you select the Byrd link. You may need to reduce the size of your browser window to see how the link to the anchor takes you to the correct spot on the page.

Figure 5.14. The Byrd section.

Linking to Anchors in the Same Document

What if you have only one large page, and you want to link to sections within that page? You can use anchors for it, too. For larger pages, using anchors can be an easy way to jump around within sections. To link to sections, you just need to set up your anchors at each section the way you usually do. Then, when you link to those anchors, leave off the name of the page itself, but include the hash sign and the name of the anchor. So, if you're linking to an anchor name called section5 in the same page as the link, the link looks like the following:

Go to <a href="#section5">The Fifth Section</a>

When you leave off the page name, the browser assumes that you're linking with the current page and scrolls to the appropriate section. You'll get a chance to see this feature in action in Lesson 6. There, you'll create a complete web page that includes a table of contents at the beginning. From this table of contents, the reader can jump to different sections in the same web page. The table of contents includes links to each section heading. In turn, other links at the end of each section enable the user to jump back to the table of contents or to the top of the page.