Most of my students that are new to coding are thrown off by the dot slash (./) notation used in filepath values in the href attributes in HTML. I was first exposed to using dots and dot dots back in the late 1980s when I first got my hands on a MS-DOS machine (prior to Windows). The way you created directories (folders) and files, moved around directory structures and generally got things done was through keying in the commands from the shell prompt.
In 1989 I began working for the Intergraph Corporation where I taught a 3-D MicroStation-based engineering product (Project Engineer Pipe). In the early days of the program you opened the program by having to type in the program name from a shell prompt. The system was Unix based and moving from directory to another required the use of dot slash notation. In general MS-DOS, Unix, Linux, Amiga-DOS, OSX and any other command line interface to the hardware operating system uses a dot slash notation to move around the file and folder structure (or backslashes in the case of early MS-DOS). Graphic User Interfaces (GUI), use the dot slash notation behind the scenes to help you navigate the computer.
HTML
HTML is a collection of marked up text in a plain text file with a .htm or .html extension. HTML files reside on a computer designated as a web server. To specify to the browser where a particular file is located, you have to use the dot slash notation.
In a nutshell, it works like this…
The characters .. tell the operating system to look in the parent folder (directory). It is not uncommon to see the following type of file path
<a href="../../filename.html"
In the example above the anchor tag is being used to create a hyperlink that will open a file that is in a folder two folders up in the hierarchy relative to the folder that the current file is in.
Some operating systems use the following notation…
| Symbol | Meaning |
|---|---|
| . | current directory |
| .. | parent directory (one directory up from current directory) |
| … | two directories up from current directory |
| …. | three directories up from current directory |
For example, let’s say we have the following code in a navigation bar…
<a href=”…/index.htm”>home</a>
In this statement the anchor tag is creating a link. The hypertexted word is “home”. The href attribute indicates which file will be opened when the home link is clicked. Because the filepath is …/index.htm, the file that is being opened is the index.htm file that is located two directories up from the current file, i.e. the html file containing the code where the link is.
<a href=”index.htm”>home</a> index.htm file resides in current folder
<a href=”./index.htm”>home</a> index.htm file resides in current folder
<a href=”../index.htm”>home</a> index.htm file resides in parent folder
<a href=”…/index.htm”>home</a> index.htm file resides two folders up.
To be safe, use the ../../.. approach to moving up in the directory structure.