What are the advantages of using relative paths?

Frequently Asked Questions HTML FAQ
1

What are the advantages of using relative paths?
Aren’t absolute paths more secure? For example if I would move my internal html file accidentally into another folder, the relative path would be incorrect and thus the link dead.
Or would the internal moving change the absolute path as well; so that the absolute path relies 100% on the relative path?

15 Likes
2

examples of absolute path:

# windows
c:\users\username\pictures\img1.jpg
# *nix
/home/username/pictures/img1.jpg

if then then move the image from pictures to documents, the absolute path would also break.

relative paths are better, given we can then move the entire project to a different computer (which very likely has a different username) and we don’t have to go and find all the absolute paths with the username in it

164 Likes
3

For some reason, this answer made it very clear to me in a general way the differences and uses of the different types of paths. Thank you @stetim94.

12 Likes
4

Relative paths are also advantageous if one moves entire website from one domain to a different domain altogether. You do not have to change all local links. For example, imagine a file like www.example.com/images/picture1.jpg. If we realise we want to change our domain to www.site.com because of any other reasons but we want to leave the files intact, the picture1.jpg image will break. But if it is a relative file like /images/picture1.jpg it will still work. So relative links are advantageous when changing domains

36 Likes
5

I think if you move your files accidentally as you said so neither absolute or relative path works, because the location become different.

3 Likes
6

true, but if you have an absolute path like:

c:\users\username\pictures\img1.jpg

and then someone else tries to install your project on there computer, and there username is different, the link won’t work

relative paths are safer in that regard, you only link to files you know exists

of course, if you move files around, you need to update your paths

16 Likes
7

@stetim94 this is a beautiful explanation.

2 Likes
8

your example is not an absolute path but a Relative Path

9

If that is not an absolute path, then what is? Could you please elaborate?

10

Sorry I finally found out that you are correct
An absolute path always contains the root element and the complete directory list required to locate the file
Relative Path is the hierarchical path that locates a file or folder on a file system starting from the current or working directory.

please pardon me I am a beginner

6 Likes
11

Yup! Still need a decent newbie explanation to this question.

2 Likes
12

yup i agree with u this kinda answer is very diifficult to understand by a newbie.

13

First off, as you may or may not know, you would use the following code to create a link in HTML:

<a href="linkhere.html">Click Me</a>

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 http://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

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 http://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:

<a href="linkhere.html">Click Me</a>

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 http://www.website.com , the actual website address the user would be taken to is http://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 **http://www.website.com/files/linkhere.html.

11 Likes
14

https://www.codecademy.com/resources/docs/html/file-paths

15

hello, newbie here. I also thought that the example looked similar to a relative path, but you corrected yourself - could you elaborate? I thought absolute paths had to start with http://www.

16

Paths can also apply to a local machine/file system. For example c:\Users\{username}\Documents\example.txt is an absolute path while ../example.txt is a relative path (.. means parent directory)

1 Like
17

oh okay I get it now. Thank you so much !

18

W3 schools explains this in simpler language than Codecademy:

“A file path describes the location of a file in a web site’s folder structure.”
“An absolute file path is the full URL to a file”
“A relative file path points to a file relative to the current page.”
“When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.”