This has been bugging me for a long time so I need to ask the question.
What is the difference between / and ./, is it just down to server settings?
For example, if we were looking for an images folder in the root directory we would write:
<img src="/images">
However, another server will only accept it as follows:
<img src="./images">
It's not a biggie, but in an ideal world I'd like to think I could transfer my sites to another server relatively easily without having to update minor details like these.
Of course, I can declare it in PHP and set it once in a config file, but it really is bugging me. Why is there two methods for declaring the root?
To reference files relative to the current page, you can either write the path plainly without a prefix, or you can be explicit about it by prefixing with ./. To reach files with paths relative to the root of your site, you prefix the path with /.
Summary
/ absolute path (full path to resource from root directory)
./ relative path from current directory (equal to not specifying any folder prefix)
../ relative path from parent directory
../../ relative path from parent of parent
Examples
Current URL Resource path Resolves to
/pages/home.html ./picture.jpg /pages/picture.jpg
/pages/home.html ../img/picture.jpg /img/picture.jpg
/pages/about/home.html /img/picture.jpg /img/picture.jpg
/pages/about/home.html img/picture.jpg /pages/about/img/picture.jpg
/home.html img/picture.jpg /img/picture.jpg
This is the same only if the source page (the one containing this HTML) is itself at the root of the domain.
In the general case, ./images is equivalent to images.
This has nothing to do with HTML, apart from the fact that URLs are used in HTML, too. This is defined in URL specifications. Briefly, ./ is relative to current base URL, and / is relative to the server root (technically, it refers to the server part of the base URL).
Related
I see the HTML code for getting to the root of a website using just / and sometimes using ./
Which one is the best practice, since they appear to achieve the same objective of navigating to the root, when dealing with root files?
ex: if I'm on an index.html file in the root directory, is there any best practice difference between using / or ./ for other pages that are on root? Or is it irrelevant for the browsers which way I point it?
/ and ./ are two completely different commands, resulting in different paths.
/ is an absolute path, which will take you to the root directory of the user, whilst ./ is a relative path, which takes you to the current directory you're on.
You can only get to the root of the website (for example, the public folder) with ./ if you are literally in that folder.
Generally stick to the root relative path: / or scheme relative path: //. If you move the page you don't need to remember to change the paths.
The scheme relative path will take the http/https of the current page.
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?
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
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/
./ 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.
. = 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).
Yes, ./ means the current working directory. You can just reference the file directly by name, without it.
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
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.
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" />
Yeah ./ means the directory you're currently in.
Do NOT use ./ as a web path! I explain why and what it is below...
TRUE WEB PATHS YOU SHOULD ALWAYS USE
../siblingfolder/file.html is a web path that starts from the folder you are in, goes up one parent folder (../), goes down into a new folder called "siblingfolder" and to "file.html" inside it. This is a type of relative path in the web world.
childfolder/file.html is another kind of web path that starts from the folder you are in and goes down to "childfolder" and "file.html" inside it. This is also as a relative path.
/subrootfolder/file.html is a web path that starts from the web root of your website and goes down from the web root into "subrootfolder" as an absolute path. Note: This path has the added advantage in that it works from any file and folder location on the server.
http://somewebsite.com/subrootfolder/file.html is another web path which works exactly the same as the ones above, but requires your web domain in the path. It still works but is very limiting because the web domain is hard-coded into the path. Some call this a fully qualified web path, which has some uses. The web browser also resolves most file paths to this address or an IP version of it.
AWKWARD AND RARELY USED PATHS
. is a shorthand for the current location or file context 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. Even though it is used by software to identify a current folder location, because it is identical to the current software path or file location, it is the same as no path so redundant. 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 in HTML and web technologies.
//somewebsite.com/folder/folder/file.html this is a form of a fully qualified web URL resolution format. "//" tells the web browser to determine the fully qualified web URL/URI at runtime and concatenate the right http protocol onto the front of your path as so: https://mywebsite.com/folder/folder/file.html. It allows the browser to query one of many web domains and determine the most secure location or protocol to use: Either "http" or "https" as the most favorable and secure prefix. This is rarely used in most internal web paths but likely found in link href attribute paths in newer HTML5 elements and used when adding links to resources that may resolve to unknown dynamic secure socket layer connections at runtime that change.
PATH EQUIVALENTS
folder = /folder a relative path is the same as an absolute path in this case if the file accessing this child "folder" is located under the web root directory. Both paths would work the same for them.
../folder = /folder a relative path going up to a parent folder then down to "folder" is the same as the absolute path if the file accessing this path again is in the web root directory.
./folder = folder both relative paths start with the files current folder and point to the child "folder" under them no matter where these folders are located, so are the same. "./" is therefore redundant.
./file.html = file.html both relative paths point to the current folder and then to a "file.html" inside that folder. This means use of "./" is redundant.
./ = {no path} an empty path is the same as ./ in the web world so redundant again.
./ = / only true again if the file is under the web root folder. Again this means "./" is redundant.
MY WEB PATH RECOMMENDATIONS
ALWAYS use Absolute Paths ("/myfolder/myfile") whenever possible as they will always work from any file location in the web project, add no confusion to developers, moving files with absolute paths will not change paths, and they are easy to maintain and manage. The only drawback to absolute paths is if you move the files or folders being pathed to new locations (example: You move an image or CSS folder of files to a new location later in the project). That is why I recommend you manage paths via server-side virtual paths, application paths, or server-generated variables so you can change absolute paths dynamically as you move things around.
ALWAYS use Relative Web Paths ("../myfile") as a secondary option. These are a must for CSS file paths, CSS imported files, or font paths within CSS files. They should only be used if your web application is designed with many parallel applications running side-by-side under one domain, and have nested and heavily dependent resource files running inside them that must be separated. In that one case, you will often move these applications as one module deeper into the application making relative pathing more valuable. You will determine paths relative to the source files in that case and not relative to the web domain via absolute paths. As above, I would still manage paths via server-side or virtual application generated paths. This makes paths extremely simple, robust, and easy to dynamically update on the fly via server variables rather than inside scripts and dependencies which constantly evolve.
NEVER use the other paths listed unless forced to by atypical, 3rd party, proprietary software conventions that use substandard pathing solutions that add confusion and added maintenance. :(
./ = Current directory
This is correct but as i figured out from some templates that i worked on before, the purpose of this identification is to remind the developer that the file to be accessed is not actually in the same directory as the HTML file being worked. Yes, I know it sounds weird.
Developers who use such definitions usually put a <base href=""> tag at the beginning of the HEAD block of the HTML page. Double quotes also indicate the directory they want to reach, so they don't have to define phrases like "../images" to access all of the image files that are not in the same directory as the HTML.
For example,
/main
/ /assets
/ / /css
/ / /images
/ / / /logo.png
/ /html
/ / /demo
/ / / /index.html
/ /plugins
every time you want to access the files in the images folder from the index.html file on a website with a directory structure like above, you need to use the src="../../assets/images" path. If you specify <base href="../../assets"> instead, you can now just use "images/" or "./images". Of course, remember, in this case, you will need to specify the file locations accordingly, as other page links will also be based on that <base> tag. So it's up to you whether you need to use it or not.
I did not wrote this to find the correct answer. This is my experience about the "./" usage so i wanted to share it. I hope it could help anybody.
In reference to the quick reference list, specifically you can use the following :
\.\ Root Directory + Current directory (Drive Letter)
I am wondering if someone can explain me, in details, the difference between this :
~/Images/delete.png
../Images/delete.png
What --I think-- I know (not sure at all) :
../ and ~/ is understand in the server side. (c#)
../ is understand in the client side but ~/ is not. (html and javascript)
../ and ~/ mean Parent directory
When I use ~/ in the server side, it look like it is converted to ../ in the client side.
I tried to find a solution, but --I think-- google do not consider '~/' and '../' in the search bar.
PS : Someone probably already asked this question. I did a lot of research but I did not find a clear answer. If you think someone did, please refer me to it.
Thank you.
EDIT :
Thank you for your answer.
So, the ~ is converted as the path to the root of the project.
Ex : localhost:8080/main/images/delete.png
~/images/delete.png ---- > ../main/images/delete.png ---- > localhost:8080/main/images/delete.png
../images/delete.png ---- > main/images/delete.png
So, the client code for the first url will be : ../main/images/delete.png
In ASP.NET, ~ is the project root operator (not parent folder). ASP replaces it with the path to the root of the project. It only works server-side because the ~ operator is special to ASP.NET, but not to a browser.
../ means parent directory, and works anywhere.
~/ is parsed on the server as the app root directory. It is a good way to refer to resources because the URLs will be correct wherever the app is installed. On the development server the root directory might be http://localhost:8080/myproject/ and when deployed it might be http://mydomain.com/.
../ is a relative URL, pointing to the parent of the current directory.
~ has no special meaning in URLs. It is just a character. It might have special meaning to something that interprets it on the server. e.g. ASP.NET maps it to the project root (when outputting pages, not when reading reading URLs from the server), and Apache is often configured to map ~foo to /home/foo/public_html/ on the file system.
../ means "Go up one level of /s" and is resolved by the client.
'/folder' = a site-root relative path
'folder' = relative path that is resolved against the current page path
'../folder/...'
= relative path that is resolved as a parent of the current page path
'~' is the asp.net specific root operator, which resolves to root of the current application.
You'll want to use this operator instead of '/' in asp.net server controls that reference resources. The ~ operator is recognized only for server controls and in server code. You cannot use the ~ operator for client elements.
To read: http://msdn.microsoft.com/en-us/library/ms178116%28v=vs.100%29.aspx
I have been asked to make some changes to a friend's company website. It uses a PHP insert file for the header on each page, which is useful as the navigation etc is the same on every page.
The following code designates the company logo on every page:
<div id="logo">
</div>
As you can see, the href of the a tag contains only a forward slash / as it's path.
The link is working fine, and connects to the index.php page.
I'm wondering how it is doing this? Seeing as the default page for the domain is controlled by the server config file, is this a shortcut to link to whatever the default page is designated as?
I've never seen this done before, and I can't seem to find any documentation concerning it. I appreciate any information you can provide.
That link brings you to the public root, and then the default file kicks in.
It's the relative equivalent of an absolute path, such as http://stackoverflow.com/
In Linux and other Unix-like operating systems, a forward slash is used to represent the root directory, which is the directory that is at the top of the directory hierarchy and that contains all other directories and files on the system. Thus every absolute path, which is the address of a filesystem object (e.g., file or directory) relative to the root directory, begins with a forward slash.
Forward slashes are also used in URLs (universal resource locators) to separate directories and files, because URLs are based on the UNIX directory structure. A major difference from the UNIX usage is that they begin with a scheme (e.g., http or ftp) rather than a root directory represented by a forward slash and that the scheme is followed directly by the sequence of a colon and two consecutive forward slashes to indicate the start of the directories and file portion of the URL.
via: http://www.linfo.org/forward_slash.html
It is a relative URI. Since it consists of just the path part, it maintains the current scheme, host, port etc and so takes you to http://www.example.com/ (assuming you were on http://www.example.com/foo/bar?baz=x#123 )
The browser then requests / from www.example.com using http on the default port (80).
The server then devices what send back. How it does this depends on what the server is and how it is configured.
Since you mention index.php there will be something that tells the server to use that.
If we use Apache as an example, that will be a combination of the DirectoryIndex directive and something to tell Apache how to handle PHP programmes.
I have a problem retrieving a flash file that is outside of the root directory.
What I have are 5 websites that use the same flash file, so I created a folder outside (one level up) of the 5 domains on my server. In the folder I have my flash file.
I am using the relative path below, but no worky worky.
"../resources/helpful_info.swf"
If I move the resource file and website files under a single domain it works fine. So, it seems I have a problem when I use a relative path and jump outside the domain to search for a file.
I don't want to use absolute path because files and paths change too much here.
Any ideas? I need it to worky worky
THANKS!
Your path does not make sense.
Relative paths are interpreted by the client, and they're used to compose a path within your domain.
You cannot use a relative path to tell the client to fetch a file outside the domain.
You also cannot reference outside your site at server side. Think security.
I see 2 fast solutions:
1) Create a new domain put the flash there. Other security problems like cross site scripting might occur.
2) Make a copy of the flash for all 5 domains. It is it update often create a script to copy it to every domain.