HTML and CSS Reference
In-Depth Information
How to link to elements with ids
You already know how to link to pages using either relative links or URLs. In
either case, to link to a specific destination in a page, just add a
#
on the end of
your link, followed by the destination identifier. So if you wanted to link from
any Starbuzz Coffee web page to the “chai” destination heading, you'd write
your
<a>
element link this:
<a href="index.html#chai">
See Chai Tea
</a>
Unfortunately, linking to Chai Tea 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://wickedlysmart.com/buzz
instead.
Here's what you're going to do:
1
Figure out the id of the Coffee heading.
Alter the existing
<a>
element in the Starbuzz Coffee
“index.html” file to point to the destination heading.
2
3
Reload your “index.html” page and test out the link.
Finding the destination heading
To find the destination heading, you're going to have
to look at the
wickedlysmart.com/buzz
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.”
