HTML and CSS Reference
In-Depth Information
FiGure 8-2
LinkinG To a PaGe secTion
A web page can be any length. If the page is longer than the browser window is tall, a scroll bar
automatically appears so the user can scroll down to read the content. If the page is very long, the
designer often includes a link to a specific section of the page as well as a link back to the top. This
type of internal linking requires two parts for each section: a link and a target. To distinguish an
internal link from a standard link to an external page, a leading hash mark (
#
) is used, like this:
<a href=”#top”>Return to Top</a>
Prior to HTML5, browsers used a
named anchor
as an internal link target. A named anchor is an
named anchor
<a>
tag with a
name
attribute instead of an
href
and without content between the opening and closing
tags. The named anchor that acts as the target for the preceding example would be coded like this:
<a name=”top”></a>
Notice that the leading hash mark is not used in the named anchor, only in the internal link itself.
Beginning with HTML5, an internal target can be any page element with an ID. For example, if the
page content begins with an
<h1>
tag, the target would look like this:
<h1 id=”top”>Welcome to our site!</h1>
The HTML5 technique removes unnecessary code from the page and provides more flexibility for
internal linking.
If you're concerned about backward browser compatibility, it's entirely pos-
sible to use named anchors as well as elements with
ID
attributes. Simply put
the code for the named anchor above the element your internal link targets and
make sure the
name
attribute in the named anchor is the same as the
ID
for the
targeted element.
