HTML and CSS Reference
In-Depth Information
As a quick refresher, the
href
attribute is what determines where the link goes, while
the text between the tags is what becomes interactive when viewed in a web page. When
the text is clicked, it will connect to whatever is specified in the
href
attribute, which
usually is a file (a web page most often). However, it may connect to what's known as
a
fragment identifier
, which is the value in the
id
attribute of an element in the linked
document. If the
href
attribute contains a fragment identifier, the user not only is dir-
ected to the linked document but is also taken to whatever element has the same ID as
the fragment identifier.
To link to a fragment identifier, a hash sign and value are added at the end of the URL,
like so:
<a href="newpage.html#parttwo">link</a>
If you want to link to a fragment identifier element on the same page, there is no need
to include the document filename:
<a href="#parttwo">link</a>
This would link to the element with the
id
of “
parttwo
,” which may look like this:
<h3 id="parttwo">Part Two</h3>
Linking to an identified element on the same page can have multiple uses, such as for
a table of contents for a lengthy document and sometimes a “back to the top of the page”
link:
<a href="#top">back to top</a>
7
Note
Another common use is to create
skip links
, which are links that allow people
to skip past long blocks of navigation links to get at the content. Skip links are usually
included for users who navigate with a keyboard or a mobile or screen-reading device,
but sometimes they also present visually for users who are zooming in and may not en-
joy scrolling around. A useful article that summarizes a good use of skip links is Jim
It's perfectly acceptable to have an anchor element that does not include an
href
attribute. For example, the menu on the
City Press
web page includes a link around
“Home” that does not link anywhere:
<nav>
<h1>Main Menu</h1>
<ul>
<li><a
class="current"
title="Home">Home</a></li>
<li><a
href="special.htm"
Search WWH ::
Custom Search