Learning HTML: Anchors & Links

---

Hyperlinks

This section will show you how to create hyperlinks. Adding hyperlinks is easy; just the same as everything else in HTML, all you'll need to know is a simple tag <A>. Here is an example:

<p>This is a page, <a href="dummy1.htm">Dummy Link 1</a>, a document in this directory.

This is a page, Dummy Link 1, a document in this directory.

If you wanted to link to a file in a different location on the same site, you simply indicate the location using forward slashes:

<p>This is a link to <a href="dummytoo/dummy2.htm">Dummy Link 2</a> which is in the directory "dummytoo".

This is a link to Dummy Link 2 which is in the directory "dummytoo".

Try those links above; I'll wait.

* * *

Jump to top

---

Back so soon?  O.K. let's get on with the lesson.

Named Anchors

Hyperlinks can be used to move the browser to a specific place in a document by using the name attribute, or by any other tag (naming with the id attribute), which is used to set up named anchors.  (Note: Some older user agents don't support anchors created with the id attribute.)  The enclosed text will be marked as a target to which a browser can jump directly much like a bookmark in word processing.

I used this attribute in the link back from Dummy Link 2 above.  Notice how it returned to the "Back so soon?  O.K. let's get on with the lesson." line above?  Here is the code for that line:

<p><a id="back">Back</a> so soon?  O.K. let's get on with the lesson.

And here is the code used in Dummy Link 2:

<p>This is a <a href="../chapter0.html#back">Link</a> back to the page you just came from.

Notice that in the link, a # must be used before the name of the section, but in the named anchor, no # is used.  You can also use this in the current document like this:

<p>This is a <a href="#back">Link</a> back to the cited line.

This is a Link back to the cited line.

Linking to Other Web Sites

The links that we've been using as examples all link to files that are located on the same server, so you can access them using directory names.  These are called relative pathnames because they are all relative to the current document.  Whenever possible, use relative pathnames in your own files.  It makes it easier to move groups of files from your computer to your web server host.  Don't put the Drive and Home Directory from your computer into the hyperlinks (absolute pathnames), they won't work correctly once you move the files to your web server host.

Now that we've gotten that out of the way, how about links to other sites on the Web?  For this you will use absolute pathnames, but instead of Drive letters you will use the sites URL.

For example, if you wanted to link to this tutorial, you would write:

<P><A HREF="http://www.freenettools.netfirms.com/tutorials/learn4/
index.html">Learning HTML 4.01</A>

Easy, Huh?  Here's another useful attribute to the <a> tag:

The title attribute may be used to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc. (Here is the code for the "Jump to top" link at the bottom of this page: <p><a href="#top" title="Jump to the Top of the Page">Jump to top<img src="../../qbullets/scrollup_a.gif" alt="[Top]" border="0" width="9" height="11"></a></p>

There are a few more attributes to the <a> tag that are not so widely supported.  I won't go into any detail here, check my Resources page for links to more detailed references to HTML.