[javascript] What does "./" (dot slash) refer to in terms of an HTML file path location?

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?

This question is related to javascript html path

The answer is


.  = 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).


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" />

. 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


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


Yes, ./ means the current working directory. You can just reference the file directly by name, without it.


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/


In reference to the quick reference list, specifically you can use the following :

\.\ Root Directory + Current directory (Drive Letter)


/ means the root of the current drive;

./ means the current directory;

../ means the parent of the current directory.


Yeah ./ means the directory you're currently in.


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.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to path

Get Path from another app (WhatsApp) How to serve up images in Angular2? How to create multiple output paths in Webpack config Setting the correct PATH for Eclipse How to change the Jupyter start-up folder Setting up enviromental variables in Windows 10 to use java and javac How do I edit $PATH (.bash_profile) on OSX? Can't find SDK folder inside Android studio path, and SDK manager not opening Get the directory from a file path in java (android) Graphviz's executables are not found (Python 3.4)