HTML Links

HTML links are what makes the web ... a web!

HTML Links are clickable text or images that connect one webpage to another. To make links, we use what we always use when coding HTML, an element. A simple element <a> used with one attribute 'href' and you will be able to link to anything and everything. The element 'a' stands for anchor and the attribute 'href' is short for "hypertext reference", which specifies where the link leads to, typically another web page on the internet but it can also lead to a file of any type.

External HTML Link

Here is an example of a standard external html link to www.google.com

<a href="http://www.google.com/">Here is a link to Google</a>

The html5 code above would look like this in the browser,

Here is a link to Google


In the above example the attribute 'href' has the value "http://www.google.com/", which is the full address of google.com and is called a URL which stands for Uniform Resource Locator. Note that "http://" must always be included in URLs.

The sentence "Here is a link to Google" is the text that is shown in the browser as the clickable link, it does not really matter what this text is but for the sake of visitors to your website try to use relevant text. As always remember to close the element with an </a>.

Link To Your Own Webpages

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages, let's call them page1.html and page2.html, and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.html to page2.html would look like this,

<a href="page2.htm">Click here to go to page 2</a>

If page 2 were placed in a subfolder (named "subfolder"), the link would look like this:

<a href="subfolder/page2.htm">Click here to go to page 2</a>

If it was the other way around, a link from page 2, in the subfolder, out to page 1 would look like this:

<a href="../page1.htm">A link to page 1</a>

In this case '../' points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing '../../'. If you find this hard to follow or understand the best thing is to try out creating some links yourself, practice makes perfect!

Link Within A Webpage

You can also create internal links within a page - for example create a table of contents at the top of the page which has links to each chapter below. All you need to use is a very useful attribute called 'id' (identification) and the symbol "#". Use the id attribute to mark the element to which you want to link to. For example,

<h1 id="heading1"> heading 1</h1>

You can now create a link to that element by using "#" in the link attribute. The "#" tells the browser to stay on the same page. The "#" must be followed by the id of the tag you want to link to. For example,

<a href="#heading1">Link to heading 1</a>

As always, try it out yourself but remember that if the content you are linking to is within the same screen view, i.e. you don't have to scroll down to it, then the link may appear not to be working when it actually is. This is because the link and the area you are linking to are too close to each other.

Link To A Document

You can also make a link to any type of file, such as a word document or PDF. It is done in almost the same way as all other links.

<a href="documents/info.pdf">Click to open the info file</a>

In this example the file is a PDF called info and it is located in a subfolder called 'documents'.

Link Titles

In addition to the 'href' attribute, you can also use the attribute title put a title on your link which appears when you hover the mouse cursor over the link. This can be used to provide extra information to the user about where the link leads to. For SEO purposes it is also recommended that you add a title attribute to all links. For example,

<a href="http://www.google.com/" title="This leads to Google">Google</a>

The code above would appear in the browser like this, (Hover over it to see the title).

Google

Next Up

Next up we explain how to add images to your webpages using HTML.