The A Tag

The A or Anchor tag is probably one of the most used in HTML, and it's certainly one of the most important. It's the tag that creates any kind of link - and now we will show you how it works.

You've probably already worked out that the A tag, like many of the other tags, is going to need some attributes, as just putting <A> in your code isn't telling the browser very much. The most used and therefore important attribute is HREF, which is where you put your path that you've learnt how to create. Here's an example:

<a href="../myfile.html">Click here to link</A>

As you can see above, after the A tag you put the text you want to act as the link followed by a closing /A tag. The result:

Click here to link

Whatever type of path you've got, it works in exactly the same way. Whether it's a mail link, newsgroup or to another web page just place the whole lot in quote marks, place an a href= in the front, add a description (use title="description") and you're done. Just make sure you close the A tag, just like the other tags that come in pairs, making sure not to overlap them.

Understanding Targets

Another important attribute of the A tag is TARGET. This tells the browser where to open the file specified by HREF and is most commonly used in sites with frames, (not that we recommend using frames). We will explain more in the Frames guide, but there is one thing you might like to know now.

By specifying a target of "_blank", the file will open in a brand new browser window. For example:

<a href="../myfile.html" TARGET="_blank">Click here to link</A>

Click here to link

You can also open a new window and assign it a name. This means that you can then open other files in that new window, rather than yet another one. Just put whatever you want to name the window as the target:

<a href="../myfile.html" TARGET="Window2">Click here to link</A>

STATUS BAR

Have you noticed on some sites that when you hover over a link some text appears in the status bar as opposed to the usual, the path to the file. You can do this with the following code:

<a href="../myfile.html" onMouseOver="window.status='Replace with the text you want to appear in the statusbar'; return true;" onMouseOut="window.status=''; return true;">Click here to link</A>

Click here to link

Technically this is JavaScript, but you don't really need to understand exactly how it works. NB: Although we have shown you how to do it we don't recommend it. Some people don't like their status bar being tampered with, so you might want to avoid this unless it's really useful. Also a lot of unscrupulous web sites do this to hide the fact they are sending you to another site or an advertiser.

Automatic or timed Linking

There may be times when you want to automatically link to another page after a set amount of time. To do this, insert the following code in the HEAD section of you HTML page:

<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://www.newsite.com">

In the CONTENT section, replace the 5 with the number of seconds you want the browser to wait until the redirection, and specify the URL to go to (in the example, http://www.newsite.com). You can use relative or absolute addressing.

It is advisable to provide a link to the new page anyway, in case this tag does not work (although it should in most browsers).

Okay so now we need to show you how to link within existing pages, just in case you have a very long piece of text.