Creating and styling web page links

With the exception of search boxes, which are forms based on and driven by server-side
scripting, online navigation relies on anchor elements. In its simplest form, an anchor element
looks like this:
<a href="http://www.friendsofed.com/">A link to the friends of ED
å website</a>

The href attribute value is the URL of the destination document, which is often another
web page, but can in fact be any file type (MP3, PDF, JPEG, and so on). If the browser can
display the document type (either directly or via a plug-in), it does so; otherwise, it downloads
the file (or brings up some kind of download prompt).

There are three ways of linking to a file: absolute links, relative links, and root-relative
links. We’ll cover these in the sections that follow, and you’ll see how to create internal
page links, style link states in CSS, and work with links and images. We’ll also discuss
enhanced link accessibility and usability, and link targeting.

Absolute links
The preceding example shows an absolute link, sometimes called a full URL, which is typically
used when linking to external files (i.e., those on other websites). This type of link
provides the entire path to a destination file, including the file transfer protocol, domain
name, any directory names, and the file name itself. A longer example is
<a href="http://www.wireviews.com/lyrics/instar.html">Instar lyrics</a>
In this case, the file transfer protocol is http://, the domain is wireviews.com, the directory
is lyrics, and the file name is instar.html.
If you’re linking to a website’s homepage, you can usually leave off the file name, as in the
earlier link to the friends of ED site, and the server will automatically pick up the default
document—assuming one exists—which can be index.html, default.htm, index.php,
index.asp, or some other name, depending on the server type. However, adding a trailing
slash after the domain is beneficial (such as http://www.wireviews.com/). If no default
document exists, you’ll be returned a directory listing or an error message, depending on
whether the server’s permissions settings enable users to browse directories.

Relative links
A relative link is one that locates a file in relation to the current document. Taking the
Wireviews example, if you were on the instar.html page, located inside the lyrics directory,
and you wanted to link back to the homepage via a relative link, you would use the
following code:
<a href="../index.html">Wireviews homepage</a>

The index.html file name is preceded by ../, which tells the web browser to move up one
directory prior to looking for index.html. Moving in the other direction is done in the
same way as with absolute links: by preceding the file name with the path. Therefore, to
get from the homepage back to the instar.html page, you would write the following:
<a href="lyrics/instar.html">Instar lyrics</a>
In some cases, you need to combine both methods. For instance, this website has HTML
documents in both the lyrics and reviews folders. To get from the instar.html lyrics
page to a review, you have to go up one level, and then down into the relevant directory
to locate the file:
<a href="../reviews/alloy.html">Alloy review</a>

Root-relative links
Root-relative links work in a similar way to absolute links, but from the root of the website.
These links begin with a forward slash, which tells the browser to start the path to the file
from the root of the current website. Therefore, regardless of how many directories deep
you are in the Wireviews website, a root-relative link to the homepage always looks
like this:
<a href="/index.html">Homepage</a>
And a link to the instar.html page within the lyrics directory always looks like this:
<a href="/lyrics/instar.html">Instar lyrics</a>
This type of link therefore ensures you point to the relevant document without your
having to type an absolute link or mess around with relative links, and is, in my opinion,
the safest type of link to use for linking to documents elsewhere on a website. Should a
page be moved from one directory to one higher or lower in the hierarchy, none of the
links (including links to style sheets and script documents) would require changing.
Relative links, on the other hand, would require changing; and although absolute links
wouldn’t require changing, they take up more space and are less modular from a testing
standpoint; if you’re testing a site, you don’t want to be restricted to the domain in
question—you may wish to host the site locally or on a temporary domain online so that
clients can access the work-in-progress creation.
All paths in href attributes must contain forward slashes only. Some software—
notably older releases from Microsoft—creates and permits backward slashes (e.g.,
lyrics\wire\154.html), but this is nonstandard and does not work in non-Microsoft
web browsers.