Links — The <a> Tag

Topics on This Page

The <a> Tag
The <href> Attribute
Defining an Anchor
The target Attribute
The title Attribute
Example

The <a> Tag

<a>...</a>

Attributes:
  href="uri"
  target="target"
  title="title"
  name="name"

Contents:
  Inline items

The <a> tag is used to create links to other web pages and to links to other locations on the same page.

<a> is an inline tag. You can therefore put it inside tags such as <p>. In strict HTML, it must be placed inside a block tag — otherwise, it is "naked" text.

The href Attribute

To create a clickable link, you include the href attribute. The href attribute tells the browser what to do when the user clicks on the link.

The href attribute can refer to another web page in your own web site. You'll want to use relative references to these. To link to a page that you've named "another.html" and that you've placed in the same directory with the page that contains the link, you'd use href="another.html". If "another.html" is in a subdirectory named "subdir", you'd use href="subdir/another.html". If it's in the directory above the page with the link, use href="../another.html". If it's two levels up, use href="../../another.html".

The href can refer to a page in another web site. If you wanted to create a link to my site from yours, you'd use href="http://wolves.dreamhost.com/". You can link directly to this page with href="http://wolves.dreamhost.com/web/xhtml/basics11.html".

The href can refer to a location on the same page. To do this, you have to define an anchor (more on that in a bit). If you've defined an anchor named "top", you can link to that location with href="#top".

You can link to particular locations defined in other pages: href="another.html#top" or href="http://wolves.dreamhost.com/web/xhtml/basics11.html#top".

Another use of href is to create an email link. href="mailto:xxxx@xxxx.net" causes the browser to open an email window with the address set to xxxx@xxxx.net. A warning, though: mailto: links won't work for everyone. They'll only work if the user has configured his/her browser for sending email.

Defining an Anchor

The Old Way

The classic way to define an anchor is by using an <a> tag with the name attribute. If you look at the source code for various web sites, you're certain to see code that looks like this:

<a href="#there">Jump down to there</a>
  ...
<a name="there"></a>

This method has never really been correct. An <a> tag is always supposed to contain some content even when it's used to define an anchor location. However, this method does work with every browser I've used, and it does validate successfully.

The following code is more correct because the <a> tag has some content:

<a href="#there">Jump down to there</a>
  ...
<h1><a name="there">Heading text</a></h1>

The New Way

HTML 4.0 specifies that an <a href="#xxx"> can refer to the id attribute of any tag:

<a href="#there">Jump down to there</a>
  ...
<h1 id="there">Heading text</h1>

Very few browsers support this method yet, so for now stick to the old method.

The target Attribute

The target attribute is primarily intended for use with frames. But it has one useful function in a non-frames site: you can use target="_blank" to have the link open in a new window.

There's a bit of controversy over whether you should open links in new windows. Some users really hate it when you do that. On the other hand, it lets the user take a look at the linked page and perhaps even follow additional links from it, while being able to get back to your page easily. If the link opened in the same window, the user might never make it back to your site!

At the very least, you should indicate somehow that the link is going to open in a new window so that you don't take the user by surprise. Users hate surprises!

Be aware that some browsers handle new windows differently from others. With Netscape and MSIE, it's pretty obvious that a new window has opened. With Opera, it's easy to fail to notice that a new window has opened. Some browsers such as AOL's browser might not even create a new window.

In a future version of XHTML, there are plans to eliminate frames. At that time, the target attribute will most likely be eliminated as well. I wouldn't worry about that too much, because I'm sure that browsers will continue to support it for some time.

The target attribute is deprecated. You cannot use it in strict HTML/XHTML.

The title Attribute

You can use the title attribute to describe the link more fully. Newer browsers (MSIE 5+ and Netscape 6+) will display the title as a little popup when the mouse hovers over the link. Other browsers ignore title.

Example

Here are some examples of links. Unfortunately, from a textarea box like this you cannot use anchors so you can't try out that feature.

These links include titles. See if your browser supports them.

The link to Yahoo will open the Yahoo site in the window. The link to basics11.html will display this page in a new window.