- 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 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.
<!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. 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, you can find out how to do that at this tutorial.