G.6. Internal Linking In Appendix F, we discussed how to hyperlink one Web page to another. Figure G.6 introduces internal linkinga mechanism that enables the user to jump between locations in the same document. Internal linking is useful for long documents that contain many sections. Clicking an internal link enables users to find a section without scrolling through the entire document. Figure G.6. Internal hyperlinks to make pages more navigable. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 5 <!-- Fig. G.6: links.html --> 6 <!-- Internal Linking --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - List</title> 11 </head> 12 13 <body> 14 15 <!-- id attribute creates an internal hyperlink destination --> 16 <h1 id = "features"> The Best Features of the Internet</h1> 17 18 <!-- an internal link's address is "#id" --> 19 <p><a href = "#bugs"> Go to <em>Favorite Bugs</em></a></p> 20 21 <ul> 22 <li>You can meet people from countries 23 around the world.</li> 24 25 <li>You have access to new media as it becomes public: 26 <ul> 27 <li>New games</li> 28 <li>New applications 29 <ul> 30 <li>For Business</li> 31 <li>For Pleasure</li> 32 </ul> 33 </li> 34 35 <li>Around the clock news</li> 36 <li>Search Engines</li> 37 <li>Shopping</li> 38 <li>Programming 39 <ul> 40 <li>XHTML</li> 41 <li>Java</li> 42 <li>Dynamic HTML</li> 43 <li>Scripts</li> 44 <li>New languages</li> 45 </ul> 46 </li> 47 </ul> 48 </li> 49 50 <li>Links</li> 51 <li>Keeping in touch with old friends</li> 52 <li>It is the technology of the future!</li> 53 </ul> 54 55 <!-- id attribute creates an internal hyperlink destination --> 56 <h1 id = "bugs">My 3 Favorite Bugs</h1> 57 58 <p> 59 60 <!-- internal hyperlink to features --> 61 <a href = "#features">Go to <em>Favorite Features</em> 62 </a></p> 63 64 <ol> 65 <li>Fire Fly</li> 66 <li>Gal Ant</li> 67 <li>Roman Tic</li> 68 </ol> 69 70 </body> 71 </html>
  |
Line 16 contains a tag with the id attribute (called "features") for an internal hyperlink. To link to a tag with this attribute inside the same Web page, the HRef attribute of an anchor element includes the id attribute value preceded by a pound sign (as in #features). Lines 6162 contain a hyperlink with the id features as its target. Selecting this hyperlink in a Web browser scrolls the browser window to the h1 tag in line 16. Look-and-Feel Observation G.2  | Internal hyperlinks are useful in XHTML documents that contain large amounts of information. Internal links to different parts of the page makes it easier for users to navigate the page. They do not have to scroll to find the section they want. |
Although not demonstrated in this example, a hyperlink can specify an internal link in another document by specifying the document name followed by a pound sign and the id value, as in: href = "filename.html#id"
For example, to link to a tag with the id attribute called booklist in books.html, href is assigned "books.html#booklist". | 