Understanding File Paths and File Linking

Understanding File Paths and File Linking

A path, alternatively known as the pathname or the current path is the complete location or name of where a computer, file, device, or web page is located.

A file path specifies the location of a file inside a web folder structure. It's like an address of a file which helps the web browser access the files.

File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages etc.
To insert a file in a web page its source must be known.

One common mistake is misspelling or using uppercase in place of a lowercase named file.

(A)

 <img src="images/close.svg">

(B)

<img src="/images/close.svg">

The file path in (A) points to a file in the images folder located in the current folder whereas the file path in (B) points to a file in the images folder located at the root of the current web;

A file path can either be relative or absolute;

RELATIVE FILE PATH

A relative path describes the location of a file relative to the current (working) directory. A relative path is a link that points to a file location on the page where the link is located.

Relative paths only point to a particular file or page, omitting the domain name and protocol. When a user clicks on a relative link, the browser searches the current website’s directory for that file and redirects to the new page.

The codes above (A) and (B) have relative paths.

ABSOLUTE FILE PATH

An absolute file path is the full URL to a file. Absolute paths include the complete web address, including the protocol, domain name, and specific file or page name. This layout can make it the best option when linking to other websites.

<img src="https://didimukhtar.com/images/icons/close.svg">

An absolute path always contains the root elements and the complete list of directories to locate the specific file or folder. All the information required to locate the file or folder is available in the absolute path.

Relative paths are used when linking within pages or files within a site, whereas Absolute paths can be used anywhere and are needed when linking to an external file/folder on a different website.

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your computer (localhost) as well as on your current public domain and your future public domains.

A common warning to the console when your file path is incorrect is the error 404;

I spent hours with a recurring error 404 in the console.

WHAT IS ERROR 404?

A 404 error is the standardized HTTP status code. The message is sent from the web server of an online presence to the web browser (usually the client) that sent the HTTP request. The browser then displays this error code.

How does a '404 error' come about?

The typical trigger for an error 404 message is when website content has been removed or moved to another URL. There are also other reasons why an error message could appear. These include:

  • The URL or its content (such as files or images) was either deleted or moved (without adjusting any internal links accordingly)
  • The URL was written incorrectly (during the creation process or a redesign), linked incorrectly, or typed into the browser incorrectly
  • The server responsible for the website is not running or the connection is broken
  • The entered domain name doesn’t exist (anymore)

RESOURCES

Thanks for reading!