HTML Tutorial

HTML Links

The ability to link from one page to another is what makes HTML hyper. Calling it Hypertext, however, is a bit of a misnomer, as images and other elements can also be linked.

Text Links

The tag for a link is perhaps the least intuitive of all the HTML tags. It is <a> and it comes from the word "anchor." You will see why later in the lesson. By itself, the <a> tag does nothing. To create a link, it requires the href attribute, which takes as a value the path to the file to which to link. The syntax is as follows:

<a href="path_to_file">Link Text</a>

For example:

<a href="bios/JohnLennon.html">John Lennon</a>

Note that a elements may not be direct children of the body element.

Absolute vs. Relative Paths

Absolute Paths

An absolute path shows the complete path to a file starting from the web root. To illustrate this, see the following directory tree:

Assume that the wwwroot folder is the web root. This means that when a user types http://www.servername.com/index.html, the index.html page within the wwwroot folder will be downloaded to the browser. The absolute path to the web root from a page on the same domain is simply a forward slash (/). So, a link on Company.html to index.html could be written like this:

<a href="/index.html">Home Page</a>

The same link could be placed on any page in any folder below the wwwroot folder or on any page in the wwwroot folder itself.

Using an absolute path, a link to Company.html would include the about directory, like this:

<a href="/about/Company.html">About Our Company</a>

External Links

When linking to a file at a different domain you must identify the location of the domain using the domain name (or IP address) of the site. To illustrate, assume that the directory structure shown above is found at http://www.beatles.com. A link to Company.html from another site would be written like this:

<a href="http://www.beatles.com/about/Company.html">
 About the Beatles</a>

See Links/Demos/Links.html for more examples of links with absolute paths.

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative path indicates where a file is relative to the file that contains the link. The folder (or directory) that contains the file being worked on is called the current directory. The relative path to another file that is also in the current directory is just the name of that file. For example, since Company.html and Contact.html are found in the same directory, they can link to each other simply by specifying the file name. The following shows a link that could be used in Contact.html to Company.html.

<a href="Company.html">About Our Company</a>

The relative path to a file in a subdirectory of the current directory must include the name of the subdirectory. For example, to link to Company.html from index.html you must first point to the about directory, like so:

<a href="about/Company.html">About Our Company</a>

The relative path to a file in a directory above the current directory should begin with ../ For example, the following shows a link to index.html from Company.html.

<a href="../index.html">Home Page</a>

See Links/Demos/Links.html for more examples of links with relative paths.

Default Pages

The web server administrator can set up default page names to look for when a path ends with a directory name without specifying a file. Often these files are called index.html or Default.htm. In this case, the following two URLs would be identical, both loading index.html.

http://www.beatles.com
http://www.beatles.com/index.html

Targeting New Windows

The target attribute is used to specify the browser window in which the linked page will open.

<a href="Company.html" target="newwin">Our Company</a>

If there is no open browser window with the specified target name, a new window will be opened with that name. As long as that window stays open, future links with the same target value will target that window. To force each link to target a brand new window, use "_blank" as the value of the target attribute.

See Links/Demos/Links.html for more examples of links with targets.

Email Links

Email links are used to open an email client to start a new email message. The syntax is similar to the links we have seen thus far. The value of the href attribute begins with mailto: and ends with an email address. For example:

<a href="mailto:paul@beatles.com">Email Paul</a>

It is good practice to include the email address as the text of the link, so that people who are printing the page or whose setup does not support email links can see the actual email address. For example:

Email Paul at <a href="mailto:paul@beatles.com">paul@beatles.com</a>.

See Links/Demos/Links.html for more examples of links with email links.

Anchors

Anchors are named locations to which a link can point. Anchors can be created with the <a> tag using the name attribute or with any tag using the id attribute.

Anchors with the name Attribute

Here is an example of creating an anchor with the <a> tag.

<a name="paul"></a>

As you can see, anchors are created using the <a> tag with the name attribute. To link to an anchor, use the pound sign (#) followed by the anchor name. For example,

<a href="#paul">Read about Paul</a>

You can also link to anchors on other pages.

<a href="about.html#paul">Read about Paul</a>

Or

<a href="http://www.beatles.com/about.html#paul">Read about Paul</a>

The file below shows illustrates the use of anchors.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anchors</title>
</head>
<body>
<h1><a name="top" id="top"></a>Anchors</h1>
<h2>Links to Anchors on Remote Pages</h2>
<div>
 <a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.3">W3C anchors.</a>
</div>

<h2>Links to Anchors on This Page</h2>
<div><a href="#winnie">Pooh Goes Visiting</a></div>
<div><a href="#alice">A Mad Tea-Party</a></div>
<div><a href="#naughtyboy">The Naughty Boy</a></div>
<hr />

<h2>Anchors on This Page</h2>
<p>Each title below has an anchor.</p>

<h3><a name="winnie" id="winnie"></a>POOH GOES VISITING - A.A. Milne</h3>
<p>Pooh always liked a little something at eleven o'clock in the morning, and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so exited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</p>
 ---- Code Omitted ---- 
<hr />
<h3><a name="alice" id="alice"></a>A MAD TEA-PARTY - Lewis Carroll</h3>
<p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'</p>
 ---- Code Omitted ---- 
<hr />
<h3><a name="naughtyboy" id="naughtyboy"></a>THE NAUGHTY BOY - Hans Christian Andersen</h3>
<p>Along time ago, there lived an old poet, a thoroughly kind old poet. As he was sitting one evening in his room, a dreadful storm arose without, and the rain streamed down from heaven; but the old poet sat warm and comfortable in his chimney-comer, where the fire blazed and the roasting apple hissed.</p>
 ---- Code Omitted ---- 
<div><a href="#top">Back to top</a></div>
</body>
</html>

You'll notice the <a> tag anchors use both the id attribute and the name attribute with the same value. Although this is not required, it is considered good practice.

Anchors with the id Attribute

Any tag with an id attribute can serve as an anchor and can be linked to.

 ---- Code Omitted ---- 
<h3 id="winnie">POOH GOES VISITING - A.A. Milne</h3>
 ---- Code Omitted ---- 
<h3 id="alice">A MAD TEA-PARTY - Lewis Carroll</h3>
 ---- Code Omitted ---- 
<h3 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h3>
 ---- Code Omitted ---- 

The behavior of these links is identical to those in the previous example.

name vs. id

The major advantage of using the <a> tag with the name attribute is that it's supported by older browsers.

The advantage of using the id attribute is that it can be applied to any tag, so there is no need to explicitly create anchors.

The title Attribute

The title attribute can be used to provide more descriptive information about a link.

<a href="#winnie" title="A short story about Winnie the Pooh">Pooh Goes Visiting</a>

This is especially useful when the content of the link is not descriptive. For example, we'll see later how to make an image into a link. It might not be clear from the image itself where the link points. The title attribute can be used to make this more clear. Browsers usually show the title text as a tooltip and screenreaders might read it the title to a blind user.

All material in this HTML Tutorial is copyright © 2008 Webucator. The purpose of this website is to help you learn HTML on your own and use of the website implies your agreement to our HTML Tutorial Terms of Service.