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

han lee
han lee
1,088 Points

Using ../ vs images/featured/header for image retrieval.

How come for this problem:

<!-- 1. Link to the 'index' and 'about' HTML files --> <li><a href="../index.html">Home</a></li>

I have to use ../ instead of <li><a href="posts/index.html">Home</a></li> ?

Why does it work for <img src="images/featured/header-img.jpg" alt="a pug's mug"> but not the former?

1 Answer

Since I can't see the video or challenge you're working on, I'll give you my best guess. I'm assuming that you are working on a page that is in a subdirectory of your site and your home page is one level higher in the folder structure, and there is a another subfolder called images that is a subfolder of the folder you're currently working in (or the link you referenced to the img src was in a page that was at the same level as the home page, and the images subfolder is at the same level as the one you're working in. Either way, this comes down to understanding file paths. I'm going to explain this in terms of your computer operating system, as it's somewhat easier to understand, and is the basis for what's happening. I'm also going to be explaining this from a PC. I'm not too familiar with exactly how things work on Macs and other OSes, but this should be good enough to help you understand. When you use a command prompt to look at your files, you have 2 main ways to navigate to another folder. You can either change to the full folder path (like cd C:\subfolder1\sub2\sub3\sub4\sub5), or you can move up or down your folder tree relative to where you are. If you are in the folder C:\subfolder1\sub2\sub3 and you want to get to sub2, you would type cd .. . If you wanted to get to sub4, you would type cd sub4 or cd .\sub4. If you wanted to get to sub5, you would type cd sub4\sub5. If you had another folder under sub2 called subA (C:\subfolder1\sub2\subA), you could get to that folder from sub3 by typing cd ..\subA. So, using a path with 2 dots takes you up one folder level in the tree, and 1 or no dots takes you down one level in the folder tree.

Since you obviously aren't going to use the full folder path on websites (because you might not have any idea what drive the folder is on), you are going to use relative references for everything, so all path names are relative to where you currently are in your file structure. If a path has more than one dot, you're going up the folder tree, and one or no dots means you're staying in your current folder or going down the folder tree. Each double dot represents a parent folder, so referencing ../index.html means the file is in the parent folder of your file and ../../index.html would mean that the file is in the parent folder of the parent folder of your current file. Similarly, ./index.html or index.html would reference a file in the same folder, and ./sub1/index.html or sub1/index.html would reference a file in the folder sub1 that is a subfolder of the folder you are currently in.

I hope this clears it up and didn't make it more confusing. If you still have questions about this, post a comment and I'll try to explain it differently.