The difference between absolute and relative paths

Question

We are working on a small website page that uses iframes. Part of our instructions are saying we need to use absolute paths instead of relative paths. What is the difference?

Answer

When using image in web pages your images don’t live inside the source code, they live as a file (jpg, gif, png, etc.) on a server. Many times in an images folder. When you are writing code and would like one of those images to show up you place a little of code that says “stick this image here”. When the webpage is rendered or displayed in your browser, it reads the code, grabs the image, and pulls it into the page so the viewer can see it.

<img src="bluebowl.jpg" alt="" name="" />

In the example code above the “src” is “bluebowl.jpg”. This means that the source of this image tag is image.jpg. When this code is viewed it will display the image you named picture.jpg. The file, bluebowl.jpg, is the source (path) to that image.

If bluebowl.jpg was in a folder named “kitchen” the code would look like this:

<img src="kitchen/bluebowl.jpg" alt="" name="" />

The path to the file says “go to the images folder and then look for bluebowl.jpg”. You’ve created a relative path.

Relative Path

What makes a path “relative” is the relationship between the page you created and where the image(s) live that you want to display. If you were standing in my kitchen and I said go to the third cabinet and get the blue bowl you would go to the third cabinet, look inside and find the blue bowl and bring it back to me.

 <img src="kitchen/bluebowl.jpg" alt="" name="" />

But, what if you were at the mall and I called you on your cell phone and said “go look in the third cabinet and bring me the blue bowl? Despite your probable desire to hang up on me, this is an example of a relative path. The instructions I gave you are dependent on you standing in my kitchen before you try to follow the directions.

 <img src="drive_home/kitchen/bluebowl.jpg" alt="" name="" />

If you were at the mall and I wanted you to get me the blue bowl, I would have to tell you to drive to my house first, walk into the kitchen, open the third cabinet, and bring me the blue bowl. The more directions I need to give, the longer the path is.

 <img src="mall/drive_to_lenas_house/open_front_door/kitchen/bluebowl.jpg" alt="" name="" />

 

Absolute Path

An absolute path comes down to directions anyone, anywhere could follow. Instructions to my kitchen would start off with something like “Go to the United States, then go to Florida…” When writing HTML code it is no different except your “world” is the World Wide Web and you always start with a web address. Relative Path… (This code assumes I am already on my website)

 <img src="kitchen/bluebowl.jpg" alt="" name="" />

Absolute Path… (This code assumes I started somewhere else)

 <img src="https://lenashore.com/kitchen/bluebowl.jpg" alt="" name="" />

No matter where my file is on the internet a properly written absolute path will find your image.

Lena Shore

Lena is a full-time freelancer and nerd that specializes in web development, graphic design, and illustration. She enjoys building things, learning new things, pursuing creative endeavors, and giving free advice.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives