The A (anchor) Tag

Before I talk about relative URLs, I need to introduce the A (anchor) tag.

The A (anchor) tag allows you to create hyper-text references on an HTML page. Hyper-text, hyper-reference, hot-link, these terms all mean the same thing: a clickable link on a page (usually a word or a picture) which invokes another HTML resource.

In case you aren't certain what a hyper-reference is, I have given an example below (once you have followed this link, hit the "Back" button on your browser to return). This link invokes the default index.html page at Yahoo using the URL "http://www.yahoo.com/":

Yahoo Link

Here's the code for the link:

<a href="http://www.yahoo.com/">Yahoo Link</a>

Tag: A
Attribute: HREF
Description: The anchor tag allows you to create an anchor point in the flow of HTML text. The HREF attribute assigns a URL to an anchor tag and makes an active hyper-reference out of the word(s) or picture marked by that tag.
Example:
<a href="http://www.yahoo.com/">Link Words</a>

As mentioned in the above description, the HREF attribute makes the A (anchor) tag operate as a hyper-reference. The value of the HREF attribute must be set to a URL, either absolute or relative. The A (anchor) tag also has another purpose, which we will discuss later.

Here is the process for making a hyper-reference:

  1. Mark the text or code which you wish to be clickable with the <a></a> tag.
  2. Add the HREF attribute to the opening A (anchor) tag, using correct attribute syntax.
  3. Set the value of HREF to specify the URL of the desired resource.

For those of you that require a more graphical representation of the construction of the A (anchor) tag, I have created this Flash movie to depict the above process (hit the "Back" button on your browser when you are finished viewing the movie):

Flash Movie - Anchor Tag demo

Here is an example of a paragraph with two hyper-references marked in the text:

Hi There. This is a link that will invoke Macromedia's default HTML page. Notice how I have marked only the text that I actually wanted hot? I could place a link to Netscape here, as well, which invokes Netscape's default HTML page. In fact, I could put as many hyper-references as I like into this code.

Here is the above paragraph as it appears in the HTML code:

<p>Hi There. This is a link that will invoke <a href="http://www.macromedia.com/">Macromedia</a>'s default HTML page. Notice how I have marked only the text that I actually wanted hot? I could place a link to <a href="http://www.netscape.com/">Netscape</a> here, as well, which invokes Netscape's default HTML page. In fact, I could put as many hyper-references as I like into this code.</p>

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.