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

HTML HTML Basics Going Further with HTML Going Further with HTML Review

Richard Verbraak
Richard Verbraak
7,739 Points

Can anyone give me an ELI5 (explain like I'm 5) answer on the topic of paths i.e relative, root-relative and absolute?

I'm confused as how this relates to running a website locally and out on the web.

3 Answers

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Richard!

To start off simply with Absolute links, they ALWAYS refer to a Domain name of a website (website address), including "http://www.________________"

Root Relative paths ALWAYS assume you're starting at the root level when declaring a path and start with a "/", which means your current position in the directory doesn't matter at all when trying to go somewhere else or reference something from somewhere else in your directory (images, etc), because you'll always go to the very beginning, and draw a path all the way to wherever you want. The drawback is that this relies on a server to process.

Relative paths rely on knowing where you are in the directory when trying to reference information from a different spot. If I'm in the index file and trying to use an image called "hello_richard.jpg" from a folder called "img" it would look like this: <img src="img/hello_richard.jpg">

BUT

Say for example, I'm editing an "about_us.html" page in a folder called "inner_pages" that sits on the same level as the index file and "img" folder, then I need to come down a level and go into the image folder.

To come out of the folder you're in and go down a level, you use "../"

So the tag would look like this: <img src="../img/hello_richard.jpg">

Here's a really useful link I found that gives great visuals (I apologize for my inability to use visuals here but hope that this makes at least SOME sense for you)

http://www.webdevbydoing.com/absolute-relative-and-root-relative-file-paths/

^^Example of an absolute path ;) ^^

This is also a very well worded and casual page that explains them: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

Let me know if I can explain anything in better detail!

Best of luck man! It seems daunting until you get that first little spark, then it will make sense, I promise

-Jake

ELI5… Think of it like your home.

Root is your home. If you are home and you need to go to the bedroom, then the path is your directions to your bedroom from your front door.

Using the same idea. Relative would be like going from one room to another. The path is, for example, directions from your current position (bedroom) to where you want to go (kitchen).

So absolute also includes how to get to your house (root). It starts with your street address and ends with the directions to the room you want to go to!

;-)

Richard, Both explanations from Jacob and Alan are really good. I thought I would throw in my two cents and include a link to the W3C explanation: https://www.w3schools.com/html/html_filepaths.asp

Good luck and you got this! Michael

Richard Verbraak
Richard Verbraak
7,739 Points

They are indeed! I'm honestly a bit flabbergasted by the speed and genuine answers I get from here haha. Anyhow, thank you for the link. ;)