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
Thatcher's “Skip Navigation” ( www.jimthatcher.com/skipnav.htm ).
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