Is it necessary to use `./` to link local files?

Is the ./ necessary when linking to local files?

One of the articles I was reading didn't include the ./ when linking to a local file.

1 Like

necessary? No

should you use it? Not perse, but you could argue its more explicit to look for the file in the current directory.

5 Likes

Do we need the dot - ./about.html
Can we use /about.html without the dot.

3 Likes

The dot represent the current directory, it can be without but then it becomes about.html

/about.html would mean looking in the root directory.

5 Likes

What if I save these html files in different folder??

1 Like

then you would have to change the path to something like ./path/to/file.html

2 Likes

Does it matter if you search in the route directory? I tried it without ./ and used / and nothing different happened.

On our local machine we need to be mindful of where our code is located with respect to the root directory, or volume root, C:\. For instance,

/  =>  C:\

On a web server, / is the site root, as in where the home page is located. A web server is configured to domain roots and is able to map its drive to serve the sites it hosts.

Within a site, / is the same as, http://www.domain.tld. Say we have the domain, example.com, then we can, within our site’s pages refer to the home page with that simple forward slash. It would be the same thing to the server as,

http://www.example.com/index.html

The absolute forward slash is the reference to the site root. Any folders we have there can be got to directly…

/css/
/js/
/images/
/pdf/

etcetera.

Now as eloquent as that is, we don’t have the same luxury on our local machine. In most cases our content is nicely tucked away in user folders. Consider if we were to have an IDE that gave us user content space within its own file structure. Where would that folder be relative to the volume root? A long ways off, to be sure. There will be several folder layers to traverse through to find your code. The IDE is probably able to map the site root for your local project in an effort to keep us from traversing the outward tree in which it is contained.

Toss the IDE, for now. How do we emulate web server behavior in our local site project? Answer: relative path addressing.

absolute path  =>  begins at site root up to resource
relative path  =>  traverses backward from request

Bottom line, use relative path and memorize the site architecture so you instantly know how many levels to jump back to access folders from where that resource is located in the site volume.

site/
+ css/
+ level1/
  + level2/
    + level3/

On the site root, the path to the css folder will be,

href="css/style.css"

On level1 it will be,

href="../css/style.css"

On level2 it will be,

href="../../css/style.css"

On level3 it will be,

href="../../../css/style.css"

It may seem an inconvenience but sure saves us a bother on our local machine if we are working directly with HTML, a site project, and using a conventional text editor that can only launch in a browser, rather an IDE mapped environment.

Don’t rush out and buy an expensive IDE until you are prepared to make a living at this craft. You really don’t need it to get an adequate learning experience. IDEs are about work flow and when that becomes an actual concern, you will be fully able to transition into that environment if you grind your way through this local machine site project model.

When a person and a computer are in the same room, there is only one brain present. Computers are dumb. Sure they may be powerful, but they only know how to do what we tell them. Document traversal is a fundamental process of a disk operating system. Explore the DOS in terms of history and command line and everything said above is reduced to its real simplicity.

11 Likes

Thank you so much for responding!

3 Likes

Indeed the dot represents the current folder>> ./about.html
I think it’s good to use it, in case you want to link it to a file above your current folder, then you need two dots >> …/about.html (by using the two dots you tell the browser to move up one folder above your current folder).

What is the difference between

  • about.html
  • /about.html
  • ./about.html
  • …/about.html ?

about.html and ./about.html are the same, although the latter is more explicit. The first on you rely on the fact that the program uses the CWD (current working directory) by default

/about.html will look for about.html in the root directory

where as . is hard-link to the current directory, .. is a hard-link for the parent directory.

So when I have a website, and I refer to “/about.html”, it may lead to “www.mysite.com/about.html” instead of “www.mysite.com/folder/subfolder/about.html”?

Not may, but will. It is an absolute address for local site navigation.