Home > Teaching > Tutorials > HTML Tutorial

Adding links

A link is made by enclosing a set of words or image in an address tag.

General form:
<a href="address.html">This text is shown as a link</a>
Example:
<a href="http://www.stat.ucla.edu">UCLA Statistics</a>

There are two types of links, absolute and relative. An absolute link typically begins with "http://" -- if you leave this portion out, it will not work.

<a href="www.stat.ucla.edu">UCLA Statistics</a>
   <!-- this is the WRONG way since it is missing http:// -->

(Try it: UCLA Statistics.) The http:// portion must always be used to link to a different domain. Absolute linking may always be used, but it does have its drawbacks. If a collection of pages are moved to another folder, this often ruins absolute links between the pages since it causes the absolute link of the pages to change. This is where a relative link comes in, which is maintained when all the files are moved together. A relative link uses the page's current location as a reference to find other pages. If a link is going to a page in the same folder, then only list the file name, as follows:

<a href="file_name.html">This link leads to file_name.html</a>

We will go into how to navigate and link between folders next.

TIP: use underscores instead of spaces in file names, otherwise things get messy in the browser address.

TIP: the file and folder names are, in general, case sensitive. It is a convenient convention to name things all in lower case to reduce ambiguity.