Linking to a Specific Part of Another Page

Linked anchors within pages aren't limited to the same page. You can link to a named anchor on another page by including the address or name of that page followed by # and the anchor name. Listing 6.2 shows several examples, such as the following:

 <a href="sonnets.html#sonnet131"> You're bossy, ugly and smelly, but I still love you.</a>

Clicking "You're bossy, ugly and smelly, but I still love you," which is shown in Figure 6.3, brings up the page named sonnets.html and goes directly to the point where <a ></a> occurs on that page (see Figure 6.4). (The HTML code for sonnets.html is not listed here because it is quite long. It's just a bunch of sappy old sonnets with <a id> tags in front of each one.) Note that anchor IDs can be a combination of letters and numbers provided that the ID begins with a letter. In this case, I used the sonnet number preceded by the word sonnet.

Listing 6.2. Using the Page Address and Anchor Name in the `<a href>` Tag

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Topical Shakespeare</title>   </head>   <body>     <h2>Shakespearean Sonnets for Every Occasion</h2>     <p>       Choose your message for a genuine Shakespearean sonnet which expresses       your feelings with tact and grace.     </p>     <p>       <i><a href="sonnets.html#sonnet131">You're bossy, ugly and smelly, but I       still love you.</a><br />       <a href="sonnets.html#sonnet2">Life is short. Let's make babies.</a><br />       <a href="sonnets.html#sonnet140">Say you love me or I'll tell lies about       you.</a><br />       <a href="sonnets.html#sonnet31">You remind me of all my old        girlfriends.</a><br />       <a href="sonnets.html#sonnet57">You abuse me, but you know I love       it.</a><br />       <a href="sonnets.html#sonnet141">I think you're hideous, but I'm       desperate.</a><br />       <a href="sonnets.html#sonnet150">You don't deserve me, but take me       anyway.</a><br />       <a href="sonnets.html#sonnet36">I feel bad about leaving, but see ya       later.</a></i>     </p>   </body> </html>

Figure 6.3. This page is listed in Listing 6.2. All the links on this page go to different parts of a separate page named `sonnets.html`.

Figure 6.4. Clicking the "bossy" link in Figure 6.3 brings you directly to this part of the `sonnets.html` page. The HTML code for this page isn't shown, although it is available from the companion web site.

Coffee Break

A popular technique for improving the visibility of a web site without spending a bunch of (if any) marketing money is to join a link exchange service such as Linkalizer (http://www.linkalizer.com/) or GoTop (http://www.gotop.com/). Such services allow you to include your site in a group of sites that willingly promote themselves to each other as part of a linked network. Link exchanging can be an affordable way to get some visibility for a new site.

Watch Out!

Be sure to include the # symbol only in <a href> link tags. Don't put the # symbol in the <a id> tag; links to that name won't work in that case.

Listing 6.2. Using the Page Address and Anchor Name in the <a href> Tag

Figure 6.3. This page is listed in Listing 6.2. All the links on this page go to different parts of a separate page named sonnets.html.

Figure 6.4. Clicking the "bossy" link in Figure 6.3 brings you directly to this part of the sonnets.html page. The HTML code for this page isn't shown, although it is available from the companion web site.

Coffee Break

Watch Out!

Listing 6.2. Using the Page Address and Anchor Name in the `<a href>` Tag

Figure 6.3. This page is listed in Listing 6.2. All the links on this page go to different parts of a separate page named `sonnets.html`.

Figure 6.4. Clicking the "bossy" link in Figure 6.3 brings you directly to this part of the `sonnets.html` page. The HTML code for this page isn't shown, although it is available from the companion web site.