Files and folders: the tree and paths

Learn to read how your disk is organized and to write a path, absolute or relative.

7 min · 3 questions

A file is a box with a name on it, holding data: some text, a photo, a song, code. A folder (also called a directory) is a binder: it holds no data of its own, it holds files and other folders. That is it. There is no third category, and that simplicity is good news: everything you will handle for years to come fits into those two words.

Since a folder can contain a folder, which can itself contain another one, the whole thing forms a tree: this is called the file tree. Right at the top sits the root, the starting point everything descends from. On Windows, the root of the main disk is written C:\. On macOS and Linux, it is simply /. Every file on your machine sits somewhere in that tree, and in exactly one place.

my-project/
  index.html
  notes.txt
  images/
    logo.png
    beach-photo.jpg
  styles/
    style.css

To point at a file without any ambiguity, you write its path: the route to follow from a starting point, folder by folder. When that starting point is the root, it is called an absolute path. It works like a full postal address: it gets you there from anywhere on the machine. Folders are separated by a backslash \ on Windows, and by a forward slash / on macOS and Linux.

Windows      C:\Users\Marie\my-project\images\logo.png
macOS        /Users/marie/my-project/images/logo.png
Linux        /home/marie/my-project/images/logo.png

Writing the full address every single time would be tedious. So most of the time you use a relative path: the route from wherever you already are. Two shortcuts come up constantly. A single dot . means "the current folder", the one I am in. Two dots .. mean "the parent folder", the one just above. It is the difference between saying "the door next to mine" and reciting a full postal address.

From inside the my-project folder:
  images/logo.png          the logo file, in the images subfolder
  ./notes.txt              the notes file, right here (the dot is optional)
  ../other-project/        a neighboring folder, one level up

Knowledge check

Make sure you remember the key points of this lesson.

1. Inside mon-projet, the styles and images folders sit side by side. From styles/style.css, fill in the path that leads to images/logo.png.

   body {
     background-image: url("___");
   }

   • images/logo.png
   • ../images/logo.png
   • ./images/logo.png
   • /images/logo.png
2. What is the difference between an absolute path and a relative path?
   • An absolute path starts from the root, a relative path starts from where you are
   • An absolute path is shorter to write than a relative one
   • A relative path only works on Windows
3. Why should you avoid spaces and accented characters in file names?
   • They cause errors in the terminal and on web servers
   • They make the file bigger
   • The operating system forbids them