What does "./" (dot slash) refer to in terms of an HTML file path location?
JavascriptHtmlPathJavascript Problem Overview
I know ../ means go up a path, but what does ./ mean exactly?
I was recently going through a tutorial and it seems to be referring to just a file in the same location, so is it necessary at all? Can I just not use it if that's all it's doing?
Javascript Solutions
Solution 1 - Javascript
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
Solution 2 - Javascript
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
Useful article: https://css-tricks.com/quick-reminder-about-file-paths/
Solution 3 - Javascript
./ is the the folder that the working file is in:
So in /index.htm ./ is the root directory
but in /css/style.css ./ is the css folder.
This is important to remember because if you move CSS from /index.htm to /css/style.css the path will change.
Solution 4 - Javascript
. = This location
.. = Up a directory
So, ./foo.html is just foo.html. And it is optional, but may have relevance if a script generated the path (relevance to the script that is, not how the reference works).
Solution 5 - Javascript
Yes, ./ means the current working directory. You can just reference the file directly by name, without it.
Solution 6 - Javascript
A fast and small recap about paths
Absolute paths
http://website.com/assets/image.jpg
IF the image is not on your domain - go look there for image
//website.com/assets/image.jpg
image loaded using http or https protocols
Relative paths
(For internal use if the image is on the same server)
image.jpg
image in the same place as the document calling the image!
./image.jpg
Same as above, image in the same place as the document calling the image!
/assets/image.jpg
Similar to Absolute Paths, just omitting the protocol and domain name
Go search my image starting from my root folder /, than into assets/
assets/image.jpg
this time assets is in the same place as the document, so go into assets for the image
../assets/image.jpg
From where the document is, go one folder back ../ and go into assets
../../image.jpg
go two folders back, there's my image!
../../assets/image.jpg
go two folders back ../../ and than go into assets
Solution 7 - Javascript
You are correct that you can omit it. It's useful only for clarity. There is no functional difference between it being there and not being there.
Solution 8 - Javascript
For example css files are in folder named CSS and html files are in folder HTML, and both these are in folder named XYZ means we refer css files in html as
<link rel="stylesheet" type="text/css" href="./../CSS/style.css" />
Here .. moves up to HTML
and . refers to the current directory XYZ
---by this logic you would just reference as:
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
Solution 9 - Javascript
Yeah ./ means the directory you're currently in.
Solution 10 - Javascript
. is a shorthand for the current directory and is used in Linux and Unix to execute a compiled program in the current directory. That is why you don't see this used in Web Development much except by open source, non-Windows frameworks like Google Angular which was written by people stuck on open source platforms.
./ also resolves to the current directory and is atypical in Web but supported as a path in some open source frameworks. Because it resolves the same as no path to the current file directory its not used. Example: ./image.jpg = image.jpg. Again, this is a relic of Unix operating systems that need path resolutions like this to run executables and resolve paths for security reasons. Its not a typical web path. That is why this syntax is redundant.
../ is a traditional web path that goes one directory up
/ is the ROOT of your website
These path resolutions below are true...
./folder= folder this is always true in web path resolution
./file.html = file.html this is always true in web path resolution
./ = {no path} an empty path is the same as ./ in the web world
{no path} = / an empty path is the same as the web root if your file is in the root directory
./ = / ONLY if you are in the root folder
../ = / ONLY if you are one folder below the web root
Solution 11 - Javascript
In reference to the quick reference list, specifically you can use the following :
.\ Root Directory + Current directory (Drive Letter)