Hyperlinks

Let's face facts, without hyperlinks, the Web, as we know it, would not exist. Notice, we're not talking about the Internet as a whole - only that portion called the World Wide Web. In fact, the important part in the name of the Web is "web" itself. The Web is literally millions of documents connected together with hyperlinks. This allows a user to be searching for a job in one moment and then immediately buying coffee the next. The fact that each document is linked (usually) in more than one way lends the term "web."

The Amazing Anchor Element

Believe it or not, the <a></a> element is to sole element responsible for providing hyperlinks. You use the <a></a> element to create both internal and external hyperlinks as well as named anchors for other hyperlinks to point to. Here's how it works:

When you use the href attribute you are creating a hyperlink to a document that exists somewhere on the Web. The browser takes care of formatting the text and jumping to the location specified in the href attribute.

When you use the name attribute you are creating a placeholder for other hyperlinks to point to. In essence, you are creating a bookmark so that users can return to a particular point in any document.

When you use both the href and name attributes, you are creating a hyperlink to another document as well as a placeholder.

We've already learned how to create hyperlinks using the href attribute. Let's put that knowledge to work for us and explore the name attribute. Here's an example:

<html>
<title>Bookmarks</title>
<body>
<a name="top">
<h1>Top of Page</h1>
</a>
<p>Usually a really long document appears here. In an effort to save space, we'll just assume that this really long document exists!</p>
<p><a href="#top">Back To Top</a></p>
</body>
</html>

So here is the general process. First we set up the named anchor. In this case, the name of the anchor is "top" and its content is the heading "Top of Page." We then assume that we've got a long document that hides the top of the page when we are done reading it. Finally, we set up a link using the href attribute that points back to the named anchor. Since this is a normal hyperlink, the browser will render the text "Back To Top" as a hyperlink. Here's how it renders:

Top of Page

Usually a really long document appears here. In an effort to save space, we'll just assume that this really long document exists!

To test this, scroll the page so that the heading is hidden but the link is not. Then click on the link. Magic!

Notice that when we are linking to a named anchor within the same document that we don't need anything more than the number (#) sign and the name of the anchor. We could just as easily used something like this:

if the page in question was index.htm or:

to target a named anchor in any document anywhere. The trick, of course, is that the named anchor must be set up first or how will you know where to point the link? You'll see this technique all over the Web as a means to navigate long documents - especially FAQs (Frequently Asked Questions documents).

Anchor Attributes

Following is a list of all of the attributes of the <a></a> element:

accesskey	A shortcut key a user can use to activate a hyperlink. Windows users could press the alt key and the value of the attribute to activate the link. Mac users would press cmd and the accesskey value.
charset	specifies the character encoding of the linked document
href	specifies the URL of the resource to which the link points
hreflang	specifies the language context of the linked resource
name	specifies the name of the anchor
rel	describes the nature of the forward link
rev	describes the nature of the reverse link
tabindex	specifies the links position in the document's tabbing order
target	tells the browser which frame to load the linked document into
type	specifies the MIME type of the linked resource

Many of these attributes are under-used at best. Some are almost non-existent. Two of the more useful but little used attributes are accesskey and tabindex. These attributes make using your pages easier for viewers. By default, no accesskey is created and the tabindex is set according to the order in which the links appear in the document.

Target, however, is used rather extensively. It allows for developers to load resources into specific frames on their sites. At this point, we don't know a lot about frames but here is something interesting. If you set the target attribute to "_blank" the resource will load into a brand new browser window. This is quite useful especially when you are pointing to resources off your site. This mechanism allows you to link to other sites without forcing the user to use the Back button of the browser (BTW, did you know that some browsers don't have a button labeled "Back"?). Let's try it out:

<a href="artofnoise.htm" target="_blank">
The Art of Noise
</a>

Here are the results:

The Art of Noise

When you click on the Art of Noise link, a new window appears with default dimensions and toolbars (when we get to some Javascript later on, we'll even be able to control those things!). In short, viewers get a new browser window that looks and behaves exactly as they're used to.

But wait, that's a very short href attribute, isn't it? The difference between this href attribute and others we've used is that it uses something called a relative path rather than an absolute path like those we've used before. The trick is that this document lives in the same directory, on the same server as the artofnoise.htm file. Since both documents share the "http://www.bright-moments.com/webdeveloper/" part of the attribute, there is no need to specify it.

Let's try another one:

<a href="images/house.gif" target="_blank">
House Pic>
</a>

This should open a new window and display the house.gif file. Pretty cool! (FYI - if you are looking at this stuff on the printer friendly page, it won't work as that document has a different relative path. It almost makes sense!).

House Pic

The possible values of the target attribute are:

_self	loads the resource in the same frame (default)
_top	loads the resource into the entire window (breaks out of frames)
_blank	loads the resource in a new window
_parent	loads the resource in the parent frame
"name"	loads the resource into a frame with the given name

Some of the values will seem a little strange but they will become clearer once we study frames.