Linking pages in HTML

This tutorial explains how to create links in HTML using the <a> tag (which stands for anchor). This tutorial covers the following:

  • Linking pages in the same folder/directory
  • Linking pages in other folders/directories
  • Linking to other websites

When creating links, you need to be aware of the filename of the document you are linking to eg. page2.html and the folder/directory it is located in. A link’s structure looks like this:

The structure of a HTML link
The structure of a HTML link

As you can see above, you use the <a> tag to create a link and the href attribute to specify the filepath or filename of the page you are linking to. If you are linking to a file in another folder than you must specify the folder it is in eg. “folder2/page2.html” and if the folder is above the current folder in the folder hierarchy then you use two periods to specify the folder above eg. “../index.html”.

If the folder you are trying to link to is several folders above the current folder in the hierarchy, then you can use multiple periods eg. ../../../index.html will link to a page three folders above the current folder.

If you are linking to another website, then specify the full URL eg. “http://www.google.com”. Make sure you start off with http:// or https:// (if the website is secure) at the beginning of the website URL.

Watch the video below and then scroll down to see the sample code.

The sample code below shows the different ways that you can link to other pages and websites.

<!DOCTYPE html>
<html>
<head>
 <title>Linking your webpages</title>
 <meta charset="utf-8"/>
</head>

<body>
 <!-- To link to another page in the same folder: -->
 <a href="page2.html">Click here to go to page 2</a>
 <br/>
 <!-- To link to another page in another folder: -->
 <a href="folder2/page2.html">Click here to go to page 2 in folder 2</a>
 <br/>
 <!-- To link to a page in a folder above the current folder -->
 <a href="../index.html">Click here to go to the homepage</a>
 <br/>
 <!-- To link to another website, include the full URL: -->
 <a href="http://www.google.com">Click here to go to Google</a>
 <br/>

 <!-- You can place links inside paragraphs of text -->
 <p>You can <a href="page2.html">click here</a> to go to page 2.</p>
</body>

</html>

Most links will be in the form of clickable text. However, you can make any content on your page a link to other content. For example, an image or button could be a link, or an entire div could also be a link.

If you would like to know how to link to sections of content on the same page, you can find out how to do that at this tutorial.