Linking pages with HTML

Web Design with HTML & CSS

🕑 This lesson will take about 5 minutes

In this lesson you will learn how to create links in HTML using the <a> tag (the a stands for anchor). This lesson 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:

As you can see above, you use the <a> tag to create a link and the href attribute to specify the file path or filename of the page you are linking to (href stands for hypertext reference – it specifies the destination of the link) eg “page2.html” or “image.gif”.

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 (Uniform Resource Locator) eg. “https://www.google.com”. Make sure you start off with http:// or https:// (if the website is secure) at the beginning of the website URL.

If you’re not sure how all of this works, make sure you watch the video below as there are several examples given. 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.

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 (a block on the page) could also be a link. We will look at styling links later in this tutorial series using CSS code.

If you would like to know how to link to sections of content on the same page, that is covered in a later lesson.

Next lesson: Adding images to a web page