A directory is a "folder" to separate, contain, or organize files and folders. This gives us different locations to save files. Picture your hard drive or server as a tree. The bottom of the tree is the roots. Higher up, the tree has branches. And each branch can have more branches. At the end of each branch, there can be leaves.
In that analogy, the tree is your hard drive, the root directory is the roots, the branches are the directories, and the leaves are the files. A family tree also works.
The internet is home to many sites. How do you know what site you're looking at? You look at the address bar. Every page has it's own unique URL (Uniform Resource Locator - a unique address for a file accessable on the internet). You can give the URL out to other people no matter what side of the world they're on and they can see it (as long as they have an internet connection).
To make an URL, we need to know the host and directory of the file we want to link to. Let's say we have http://www.MyTailsSite.com. That part is the domain name and the root directory of the site. If we want to access a page called info.htm in the root directory, the URL would be http://www.MyTailsSite.com/info.htm. We separate directories by a "/" (forward slash) sign.
There are two types of paths. There are full paths (the entire URL), and relative paths (relative to where you use it). Let's say you gave your phone number out to your neighbor. Would you give him the area code? It wouldn't be necessary to give the entire number because the phone assumes the current area code if you leave it out. Likewise, you wouldn't tell someone who lives nearby what state you live in if you told them your address. Relative paths work the same way. When you link to a file, you can specify the full URL (the entire http address), or just the path to the file from the location of the page you're linking from.
Take a look at the image below: This example shows a bunch of squares inside of squares. The big gray square is the root directory. It holds a green and yellow square inside it. These 2 squares are directories inside the root directory. They are also siblings since they share the same parent. The green square has a red square inside it. The red square's parent is the green square. By now, the idea should seem clear to you.
When we make a link to a directory using the <a> tag or view a directory without specifying a specific file, the server shows us an index page (if it exists). The index file is usually index.htm, index.html, index.php, etc (configured by the server. There can be more than one index file but they'll have different priorities). When you link to a directory, it loads the index file. If you were to load http://xfox.digibase.ca, you're infact seeing http://xfox.digibase.ca/index.htm.
Whenever you can, use relative paths. It's shorter than putting a full URL to a page and it's easier to maintain. However, you will have to adjust the relative path address if you ever move the page to a new location. A simple "The window is to the left of the doorway" instruction may work in one room but it might not work in another. But there are special directory entries we can use to help us out. Let's say we wanted to make a simple link to access the parent or root directories regardless of the path the page you're linking from. No matter what directory we're in, we can use "/" as a link to take us to the root directory. From there, it would load the index page of the root directory, taking you home. When a path starts with / in it, that means the directory or file you're specifying is relative to the root directory. And when we need to go up a level in the directory tree, we can use ".." (2 dots) to reach the parent directory. And lastly, there's the "." (single dot) to refer to the current directory (of course the directory you're in is the current directory, but don't forget about index pages).
If we look at our visual example, we see that the green and yellow squares are siblings. But how would we reach the yellow directory from the green? In this case we can use ../yellow. The 2 dots bring us to the parent directory (green) and from there, we specified yellow. And if we wanted to go to the root directory from yellow, we could use ../.. but it would be more efficient to use / instead.
The main difference between a file and a directory is how they are treated. Technically, directories are files in a way too. This is why a file and directory in the same location cannot have the same name. The size of a directory is measured by it's contents (In the visual, see how the green square is "bigger" than the yellow square because the green one holds contents inside it). And if you delete a directory, all it's contents are deleted along with it. It's up to you to create directories to organize your files. Try to provide them with user-friendly names because the directory will show up in the address bar as part of the URL of the user's browser.
