HTML Links

March 09, 2008

HTML links (also called hyperlinks or anchors) are one of the most significant and powerful tools of HTML and the internet. They allow documents to be linked together to create collections of information which can be shared around the world. The user then navigates through these documents by clicking on the links.

Absolute links

Absolute links are links that point to a complete URL containing the domain name of a website. The so called anchor tag <a href="...">...</a> forms a link around the enclosed content making it clickable. The href (hypertext reference) attribute is where you put the actual address you're linking to.

HTML absolute link:

  • <a href="http://www.google.com/">Google</a><br />
  • <a href="www.google.com">Google?</a>

Display:

Google
Google?

If you click both links you'll find that the first one takes you to the Google homepage while the second one gives you a page not found error. The reason lies in the way the URL is formed. In the first link the exact absolute address is given. In the second link, however, the http:// has been omitted, causing the browser to think we're requesting a www.google.com file stored in the same place as the page you're viewing right now!

Relative links

Relative links are links containing solely a document name and maybe a relative path in the href attribute, just like the second link in above example. By omitting the http:// you're telling the browser to look for a file relative to where you currently are which always means on the same homepage.

HTML relative link:

  • <a href="/">Go to the root</a><br />
  • <a href="../web-hosting-guide">Go up one level to the web hosting guide</a><br />
  • <a href="../../">Go up two levels</a><br />
  • <a href="html-lists">Go to the HTML lists tutorial in the same directory</a>

Display:

Go to the root
Go up one level to the web hosting guide
Go up two levels
Go to the HTML lists tutorial in the same directory

Note that your web browser always displays an absolute URL in the status bar when having your mouse over the link, even if it's a relative URL in the code. Relative paths take some getting used to but they're a great way of ensuring that your internal website links work regardless of the domain name. Instead of absolute paths with a domain name you can replace it with the root / <a href="/path_to_document">...</a>.