HTML Links

HTML Anchor Tag <a href="...">Label</a>
HTML Anchor Tag <a name="..."></a>
HTML Anchor Tag <a href="mailto:..."></a>

HTML: HyperText Markup Language.
HTTP: HyperText Transfer Protocol.

Hyper-links are what distinguish HTML documents (e.g. Web pages).

Linking to a Document

The href attribute of the anchor element links to a document using an absolute path or a relative path. Relative paths are used for documents and files within the directory structure of the machine where the server is installed; Absolute paths are used to link to documents and files on The Internet using a Uniform Resource Locator (URL):

<a href="personal.html">Boris Badenov's Personal Page</a>
<a href="project/intro.html">Term Project</a>
<a href="http://www.mhuffman.com/notes/html/html_2.html">HTML Hyper-links</a>

The first link uses a relative path; it tells the browser to look in the same directory (e.g. folder in Windows speak). The second link is also a relative path; it tells the browser to look in the directory called project for the file intro.html. The third link uses an absolute path, also called a Fully Qualified Domain Name (FQDN). Use relative paths for all links to documents, images, etc. that are in your hosting site directory structure.

Do NOT do something like this:

<a href="http://cs.clark.edu/~bbade1234/personal.html">
Boris Badenov's Personal Page</a>

It will work, however

It is wasteful for the browser to go out on The Internet to load a document that is in the same place as the current document
All the extra typing increases the chance for an error
If or when you move your Web pages to a new hosting site any links that reference your pages with FQDN's will have to be changed. If you have a lot of pages this is not a trivial task!

Hyperlinks

[ TOP ]

Linking Within a Document

The name attribute creates a named label within a document to link to. Note the various [ TOP ] links in this document. Somewhere near the top of the page where I want a viewer to return to, typically a "Table of Contents", I write an anchor tag like this:

<a name="TOP"></a>      <!-- "address" within a document -->

Then elsewhere in the document, say at the bottom, or on a page that has major sub-sections, at the bottom of each section, I write a link like this:

<a href="#TOP">TOP</a>  <!-- link to label within document -->

Note in particular the "#" character prefix to the "address" I am linking to (which is essentially a named lable within the document).

You can also link to a named address in a different document (provided, of course, that the document you are linking to has a named label). For example, using a relative path to the Resources Page I can direct a viewer to a specific section of that page, in this case the "HTML, Web Hosting, and JavaScript" section of the Resources index page:

HTML, Web Hosting, and JavaScript

Here is the HTML:

<a href="../../resource/index.htm#HTML">
HTML, Web Hosting, and JavaScript</a>

".." means "the parent of the current directory," so "../../resource/index.htm" means go up 2 directory levels, go down into the resource directory, and open index.htm

[ TOP ]

Email Links

An email hyper-link is just the basic anchor HREF element where you use an email address prefixed with "mailto:"

Email Boris Badenov, World Champion No-Goodnik, at the Ukrainian Safecracking College: bbadenov@usc.edu

The HTML:

Email Boris Badenov, World Champion No-Goodnik, at the Ukrainian
Safecracking College:
<a href="mailto:bbadenov@usc.edu">bbadenov@usc.edu</a>

[ TOP ]

Revised: 17 SEP 2006 21:04