Links and Anchors

A link is something that is a reference to something else. Either you go to the reference or you get something from the reference. Usually it is another html document or a file but it may also be an e-mail address.

Link to another HTML Document

If you want a link to another page located at the same place as the one you are on, you do like this:

<a href="document.html">Click Here</a>

This will look like this (the link will not work because there is no file called document.html here):

Click Here

This will display an underlined "Click Here", and if you click on it, it will open a file called document.html. If the file is somewhere else you have to enter a path, for example texts/document.html (if it's located in a subdirectory called texts). If you want to link to a document which is on another server (someone else's homepage, for example) you have to enter the full path:

<a href="http://www.somewhere.com/document.html">Click Here</a>

As you've probably figured out, it's the thing between the <a> tags that will be clickable. So if you want a clickable image instead of text, you just replace the text with an <img> tag.

<a href="http://www.somewhere.com/document.html"><img src="image.gif"></a>

Remember to include an alternative (the <alt> tag) text to your image, because if the image fail to load it will be very hard to know what kind of link it is.

Link to another place in the same HTML Document

Sometimes when a document is very big, it may be useful to link to another place within a document. It work the same way as linking to another page except that you have to "mark" the place in the document you want to link.

<a name="hello">Click Here</a>

Ok, now you've marked a place in the HTML document. The "Click Here" text will be displayed as standard text. Linking to this place within the document is also done the same way, but you have to add a #hello after the file name.

<a href="document.html#hello">Click Here</a>

This will take you to the place named (or marked) hello withing the file document.html. If marked place are on the same page you already are on, it's enough just to use href="#hello".

Link to an E-Mail Address

Probably you've seen those links that look exactly like usual links but they bring up an "Send E-Mail" window. It's also done the same way as the links above, but instead of a file name you enter mailto: and then your e-mail adress. <a href="mailto:stefpet@algonet.se">Send an E-Mail</a>

Last updated 970621