Internal HTML Links

Internal HTML links can be used in exactly the same way as external HTML links. For example if you had a website called www.mybrilliantwebsite.com, you might have several pages, such as a links page, http://www.mybrilliantwebsite.com/links.htm. You could use this address on your home page to link to your links page like so:

<a href="http://www.mybrilliantwebsite.com/links.htm">Links</a>

This type of address is known as an absolute address because it contains all the information required to make a link to the page, starting with the http:// and moving through the entire web page address.

But there's a second way to link to other pages on your website, and that's by using relative addresses. With relative addresses, the browser already knows what website the user is on, so it takes that and just adds on the extra bit of the link which describes the exact page to visit. The best way to explain this is with an example. For the above link we could get rid of most of the address, leaving us with just the page address, "/links.htm":

<a href="/links.htm">Links</a>

Now isn't that much easier to type? The best part about relative links though is that they will remain intact even if you moved your website to another domain name. For example, if we moved all of our web pages from www.mybrilliantwebsite.com to www.myevenbettersite.com, the first type of link, the absolute link, would still be trying to send us to the old page. However, the relative link would work no problems.

At this point it is worth taking a slightly closer look at one aspect of relative links, and that is the use of the forward slash / before our link target. When we add this forward slash, we tell the browser to go back to the website's root directory before it looks for the desired file. In the example above the root directory is www.mybrilliantwebsite.com, so the browser would look for the file www.mybrilliantwebsite.com/links.htm.

This can be useful because some of our links may not be in the root directory. For example we might have the above link on a page called www.mybrilliantwebsite.com/articles/page.htm. By using the forward slash we send the browser back to the root directory first, so the link would still work fine.

If we omit the forward slash then the browser will look for the link based on the directory it is currently in. In the above example therefore it would look for the page in the directory www.mybrilliantwebsite.com/articles.

When constructing relative links it is important to bear this in mind. I prefer to always use the forward slash, but as you experiment you will build your own personal preferences.