The <A>...</A> Tag

Links are created in HTML with the <A>...</A> tag, commonly referred to as the anchor tag. Before creating a link two things must be known:

The most common attributes of the <A>...</A> tag are

The HREF Attribute

The HTML code for a link is shown and broken down below:

Example: Basic Use Of HREF Attribute
<A HREF="Links.html">Link to the top of this example</A>
Link to the top of this example


Breaking it down, the parts of the link are as follows:

NAME Attribute

Often linking to a specific file is not specific enough. Linking to a specific place in the BODY of an HTML page can be done with the NAME attribute.

Example: Use Of NAME Attribute
<A NAME="AnchorPoint">

The tag above is not seen in a browser but acts as a placeholder for a specific HREF link.
Note the use of the Pound Sign (#) in the code below:

<A HREF="Links.html#AnchorPoint">Jump to the AnchorPoint in the Links.html file</A>
Jump to the AnchorPoint in the Links.html file

All the reader sees is the line above

The complete example to break down is in two parts:

  1. The following code must be in the Links.html file:
    <A NAME="AnchorPoint">
  2. The code to link to that specific point can be in any file:
    <A HREF="Links.html#AnchorPoint">Link To It</A>
  1. The Target Anchor Tag code:
    <A NAME="AnchorPoint">
  2. The Source Anchor Tag code:
    <A HREF="Links.html#AnchorPoint">Link To It</A>

Any text can be used in place of the AnchorPoint example. The type must match exactly in both the source (<A HREF=...>) and target (<A NAME=...>) tags.

If linking to a different point in the same file, the name of the target file may be omitted in the source, starting the name of the link with the Pound Sign:
<A HREF="#AnchorPoint">Link To It</A>

Using Images As Links

Anything between the opening (<A HREF="...">) and closing (</A>) anchor tags will serve to activate the link whether it is text or a graphic element.

Simply adding code for an image inside the anchor tags will work:

Example: Using An Image As A Link
<A HREF="Links.html"><IMG SRC="Image.gif"></A>


Addressing A Link

As a Web presentation grows and dozens or hundreds of files are needed, it becomes necessary to organize themm in folders or directories.

When HTML files that are not in the same folder or directory are referenced, the link must contain instructions leading the browser to the location of the file. HTML allows links to be made using absolute and relative pathnames.

Absolute Pathnames

Absolute pathnames specify the exact location of the file using the names of the directories that must be traversed in order to reach the referenced file.

Absolute pathnames are not nearly as portable as relative pathnames. If files move to a different folder or directory, or if part of a path or disk is renamed, absolute pathnames will not work. The link will be broken and the files will not be found.

Example: Absolute Addressing (1)
<A HREF="d:/HTML/index.htm">

The file index.htm is located on Drive D: in the HTML directory

Example: Absolute Addressing (2)
<A HREF="Server/HTML Stuff/index.html">
The file index.html is located on the "Server" in the "HTML Stuff" folder

Relative Pathnames

Relative pathnames are the best way to keep your document portable. If the files are moved from one disk to another, or pushed several directories down, the links still work.

The browsers remembers where the first file was opened; when another is called, it begins searching from the same directory as the file it already has open.

Example: Relative Addressing (1)
<A HREF="file2.html">

Look for "file2.html" in the same directory as the current file

Example: Relative Addressing (2)
<A HREF="../file2.html">

Look for "file2.html" one level up from the current directory (two periods and a slash)

Example: Relative Addressing (3)
<A HREF="../../file2.html">

Look for "file2.html" two levels up from the current directory (two periods and a slash, once for each directory)

Example: Relative Addressing (4)
<A HREF="morefiles/file2.html">

Look for "file2.html" one level down from the current directory in the "morefiles" directory

Example: Relative Addressing (5)
<A HREF="../../Specials/Pricing/file2.html">

This time "file2.html" will be found two levels up, and then down in the directory structure into the "Specials" directory then the "Pricing" directory

More about URLs

URL stands for Uniform Resource Locator. Simply, it is a method to point to a specific place on the Internet. It allows each place to have a unique "address", like a street address or phone number. Each URL contains 3 parts:

  1. Protocol
    Several types of protocols are listed below
  2. Host name
    The computer system that holds the data
  3. Directory and filename
    The information to direct the browser to a specific file
Different types of URLs include

[Back] [Top] [Next]

©Ken Kaleta. All Rights Reserved.