Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Server Paths
Definition
Server paths specify the location of the files, folders, and directories within a server's file system so web browsers can locate them.This is where understanding server paths is vital. You can create multiple directories (such as one for images, one for scripts, etc.) and keep things well-organized and possibly improve the performance of your website.
Relative Path
If you link from a page to a file in the same directory, this is a relative path. It's "relative" to the current location. In that case the server path is simply the file name and file extension. For example, if you linked from the index page in your root directory to photos.html in the same directory, then the server path to that page is simply:Because the photos.html file is in the same directory as the page linking to it, the server path is simply the file name and extension. Why? Because the browser doesn't have to navigate away from the directory it is already in. So in that scenario, this would be the link code:
However, if you kept your photo pages in a directory (folder—same thing) named pictures, and that directory was in the root directory, then the server path to that page would be:
The server path just tells the browser where to find the file being linked to. With a relative path the reference is always from the current location. So the previous example is telling the browser to look in a directory name pictures to find a file name photos.html. Here are some other examples:
| Example | What the example means... |
|---|---|
| "page.html" | The file page.html is located in the current directory. |
| "tips/page.html" | The file page.html is located in a directory named tips that is located in the current directory. |
| "tips/web/page.html" | The file page.html is located in a directory named web that is located in a directory named tips that is located in the current directory. |
| "../page.html" | The file page.html is located in a directory one level up from the current directory. |
| "../../page.html" | The file page.html is located in a directory two levels up from the current directory. |
| "../moo/page.html" | The file page.html is located in a directory named moo that is one level up from the current directory. |
You probably didn't have trouble following the first three examples in the table, but let me add a word or three about the last three examples.
When you have a web page located in a sub-directory and you want to link to a page in a directory on a higher level, the path must point the browser in the right direction or it won't find the file.
The two dots and forward slash ( ../ ) tell the browser that the file named in the link is one level up in the server structure. For each additional level higher that you need to go, add another set of two dots and a forward slash.
Absolute Path
An absolute path provides the complete path from the root directory to the target file or directory. It typically starts with the root directory symbol (e.g., "/") and includes all the directories and subdirectories in the path.Absolute paths are fixed and do not depend on the current working directory. They are commonly used when referencing files or directories in a consistent and unambiguous manner. Example of an absolute path:
Important Freaking Note: The absolute path shown in that example may not be the same for your hosting environment. The idea of an absolute path remains consistent across web servers, but there can be differences in the specific syntax and conventions used in different hosting environments to represent absolute paths.
Things that affect the absolute path: Operating system, server configuration, hosting environment, web frameworks and CMS platforms.
So which should you use, relative paths or absolute paths?
That's your choice, but relative paths are generally considered a safer choice. Here's why:
- Portability: Relative paths are based on the current working directory and provide a relative reference to files or directories. They are not tied to the specific structure of any server's file system. This makes relative paths more portable, as they can be used across different server environments without requiring modifications.
- Easy migration: When migrating a website or application to a new server or hosting environment, relative paths can simplify the process. Since they are independent of the server's file system structure, you don't need to update the paths throughout your code or content. Relative paths can adapt to the new environment automatically.
- Avoiding hardcoding: Relative paths avoid the hardcoding of specific server file paths, which can become problematic if you move your site OR the webhost changes the server's file system structure. Hardcoded absolute paths may break when moving to a different server or if directory structures are altered.
I was glad I use relative paths when my web host tripled my hosting fees. I simply moved my site to a new host at less than it would have cost me without the tripling of fees. My site was moved before the old host had a clue it was gone.
While relative paths offer advantages in terms of portability and ease of migration, there are scenarios where absolute paths may be necessary. For example, if you are working for an employer with specific server configurations that require absolute paths.
