If you're seeing this message, it means we're having trouble loading external resources on our website.
If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.
Still today, one of the more tricky and confusing things about HTML is linking to other pages and sites, especially when absolute and relative paths come into play. But worry not! Creating links — relative and absolute alike — is actually fairly easy. Read on, and by the end of this article, you'll know the difference between these two types of links, as well as when and how to use them.
Of course, it's still important to understand how relative and absolute links work, so read on...
First off, as you may or may not know, you would use the following code to create a link in HTML:
Click Me
linkhere.html would be the page you want to link to, and Click Me would be the blue, underlined link that the page displays.
In the example above, we used a relative path. You can tell if a link is relative if the path isn't a full website address. [A full website address includes //www.] As you may have guessed, an absolute path does provide the full website address. Here are a few basic examples of relative and absolute paths:
Relative Paths
- index.html
- /graphics/image.png
- /help/articles/how-do-i-set-up-a-webpage.html
Absolute Paths
- //www.mysite.com
- //www.mysite.com/graphics/image.png
- //www.mysite.com/help/articles/how-do-i-set-up-a-webpage.html
The first difference you'll notice between the two different types of links is that absolute paths always include the domain name of the website, including //www., whereas relative links only point to a file or a file path. When a user clicks a relative link, the browser takes them to that location on the current site. For that reason, you can only use relative links when linking to pages or files within your site, and you must use absolute links if you're linking to a location on another website.
So, when a user clicks a relative link, how does their browser know where to take them? Well, it looks for the location of the file relative to the page where the link appears. [That's where the name comes from!] Let's get back to our first example:
Click Me
This link points to a filename, with no path provided. This means that linkhere.html is located in the same folder as the page where this link appears. If both files were located in the root directory of the Website //www.website.com, the actual website address the user would be taken to is //www.website.com/linkhere.html. If both files were located in a subfolder of the root directory called files, the user would be taken to //www.website.com/files/linkhere.html.
How about another example? Let's say we our //www.website.com domain had a subfolder called pictures. Inside the pictures folder is a file called pictures.html. The full path to this page would be:
"//www.website.com/pictures/pictures.html"
Still with us? Good. Let's say in this pictures.html file, we have a link:
More Pictures
If someone clicked that, where do you think it would take them? If you said //www.website.com/pictures/morepictures.html, you'd be right! You probably know why it would take them there: because both files are saved in the pictures subfolder.
Now, what if we wanted to use a relative link to show a page in another folder? If you want to link to a file in a subfolder of the current folder, provide the file path to that file, like so:
Read about my Tahiti vacation.
In this example, you're telling the browser to look in the current folder [pictures] for a subfolder [tahiti-vacation] that contains the file you want the user taken to [tahiti.html]. You can link to as many subfolders as you need using this method.
What if you want to link to a file in a folder above the current folder? You have to tell the browser to move up one folder in your relative link by putting two periods and a slash [../] in front of the filename or path: