Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
michaelcodes
5,604 PointsDifference between Absolute path and Root relative? Don't they both start from the root?
Hello, I originally learned about Absolute vs. Relative paths in a class and had a good understanding. Now that I have learned about Root relative classes here, I am not sure what the difference is between them and Absolute.
Say I needed to access a file called article01.html stored in articles/2017 from root.
For Absolute this would be /articles/2017/article01.html
For root relative wouldnt this also be: /articles/2017/article01.html
Even when using it in some child folder wouldnt the result be the same either way?
Thanks for any clarification I can get!
4 Answers
Matthew Lang
13,483 PointsI learnt about Relative vs Absolute in my computing science class, and here is my take on it: An absolute path can be used anywhere, as it is 100% to the point and will get you there every time. Whereas a relative path is less reliable, as the path must lead FROM the current directory.
So for example, I have a website matthewlang.com/img/coffee.png - this would be an absolute path, since it will link directly to the directory every time. However, let's say I have index.html inside the public folder, which is inside the same directory as the img folder. I would need to come out of the public folder, and go into the image folder.
<img src='../img/coffee.png'>
We use two dots followed by a forward slash to exit a directory. This path is relative, since it is relative to only that current working directory, matthewlang.com/public/index.html
Hopefully this doesn't confuse you even more, and if anyone else is reading and I'm wrong, please correct me.
Dan Thomas
Courses Plus Student 1,611 PointsAbsolute path= top down the file tree from the root folder/directory Relative path= bottom up the file tree
It seems that relative paths are used just in case the root folder is changed.
web pad
4,483 PointsThank you for this info. This i really what confused me so much in the beginning. Relative path is when starting from the bottom of the file tree up. Absolute path is from top of file tree down.
michaelcodes
5,604 PointsThank you so much Alex! This helped me a ton, I was not thinking in the context of having your index in a different location. So far in my study and practice I have always stuck with just plain old Relative paths. They did warn us about how much of a nightmare absolute paths can be when moving directories and updating websites so I have always avoided it just to be safe :)
Once again Thank you! and happy coding!
michaelcodes
5,604 PointsHi guys thanks for your responses! I understand it a bit better now, that makes sense that "root relative" begins at C: drive. I have a few more questions now though.
Its this darned Computer Science class I took that has me confused :S. I have the book from Cengage in front of me right now. They describe absolute paths as "Starting from the root folder and processing down the entire folder structure", and the example they give is "/thai/docs/catering/ct_catering.html"
The book then mentions Relative paths, which I totally get! But it makes ZERO mention of the ROOT Relative.
So my follow up question is, how does the computer know if you are using ROOT relative vs. Absolute?
If I had a folder on my desktop called "TruthNews" that had inside an index.html, a folder called "articles" and a folder called "imgs". The absolute path from an article to an image would be "/imgs/imagename.png" right? Because the location of the index.html begins the path system in absolute pathing?
Thanks again everyone!
Alexander Bourlotos
4,009 PointsI think the book is referencing whatever folder your main files start is "root". The term itself can be used for anything you want, it just depends on explanation.
An Absolute path would start from the "root" of the file's contained directory, not the root of the entire file structure.
Like, if I made a folder on my desktop called "My Website" and that had a folder called "images" that had a folder called "background" your path would be "My Website/images/background"
Now let's say your index.html file is in "My Website" folder
- using something like "/images/background/background.png" would work, because the absolute path knows that the root (of your webpage) is the current folder where index.html is located.
Now, let's say for some reason your index.html file was in it's own directory, like a blog page. let's say "My Website/Blog/index.html"
- Using an absolute path won't get you any images unless you go up a level, so you'd see "../images/background/blog-background.png" or basically, you're going back to the root directory for the home page in order to pull the images.
Note that I didn't say the root directory for the blog. The absolute path if you used "/images/background/blog-background.png" won't work, because the absolute path is looking in the root of it's current directory FOR an images folder (as if it was "My Website/blog/images/background/background.png") but that file doesn't exist.
Absolute Paths looks in the root of the contained directory for that file, and expands form there Root-Relative Paths looks outside of the contained directory (even levels up) to find the directory you're linking to.
Root Relative paths work well on web hosting because the "root" path is your public folder containing your index.html file. There's no further directory for the root-relative path to go. That means you can contain ALL of your images in your root folder and always use root relative paths. This is useful if you have a blog, portfolio, calendar, or any other amount of pages linking to your main one that you want to use the same images for. It only ever has to load from one location.
Note: If you were to install self-hosting on your comptuer to emulate that of an online hosted service, then root-relative paths would work the same way. I have not done this myself but I've seen it mentioned.
Absolute paths are a pain because depending on the page you're on, you would either have to keep many different /images repositories in your subdirectories, or you'd be hand-coding in each difference in where you're at in your website tree.
Sorry for the novel, but that's about all I know about root-relative vs. absolute. I hope that helps.
Alexander Bourlotos
4,009 PointsAlexander Bourlotos
4,009 PointsI wanted to add to this with another example just in case! But Matthew is correct.
Let's say your testing a website on your computer (not hosted)... Well the problem there is that the "root" of your directory at that point is your C: drive. So if you use root relative paths vs. absolute when you're working on, say, the Desktop directory on your computer, it wouldn't find the path. You may notice that the root-relative path works in your hosted site but not if you download the files to your pc and run from the folder there.
This will get more prevalent as you expand on how many sites you make. If you had ALL of your images in your root directory ../images but you were making a blog in a separate directory "../blog/index.html" then if you used "/images/image.png" it wouldn't find it, because there is no "images" folder in "../blog/". Then you would have to use the root-relative link of "../images/image.png" as a reference to your image.
I hope that helps!