Head First HTML with CSS

How to link to destination anchors
You already know how to link to pages using either relative links or URLs. In
either case, to link more specifically to a destination anchor in a page, just
add a # on the end of your link, followed by the destination anchor identifier.
So if you wanted to link from any Starbuzz Coffee Web page to the “chai”
destination anchor you’d write your element link this:
See Chai Tea
Unfortunately, linking to Chai Tea with a destination anchor isn’t very
impressive because the whole page is small enough that it easily fits in the
browser. Let’s link to the Coffee section of http://buzz.headfirstlabs.com
instead. Here’s what you’re going to do:
1 Figure out the id of the destination anchor.
2 Alter the existing element in the Starbuzz Coffee
“index.html” file to point to the destination anchor.
3 Reload your “index.html” page and test out the link.
Finding the destination anchor
To find the destination anchor, you’re going to have
to look at the buzz.headfirstlabs.com page and view
their HTML. How? Almost all browsers have a
“View Source” option. So, visit the page and when
it is fully loaded, choose the “View Source” option,
and you’ll see the markup for the page.
In most browsers, you can
right-click to “View Source”.
You’ll also find “View Source”
in the browser menu, usually
under “View”.
getting connected
The main benefit of
destination anchors is to
link to locations in long files
so your visitors don’t have
to scroll through the file
looking for the right section.
you are here 153