HTML File paths

HTML File paths

How to access files in your folder structure

Welcome to my blog. Today, we will be simplifying the concept of file paths.

Introduction

In programming, a very important concept one has to learn is file organization. They are a lot of ways to structure your files in your projects' folder. After structuring your files, something we have to take note of is locating and accessing your files in their different locations.

Let's dive into it.


Explanation

A path is a string of characters that is used to identify a specific location in a directory structure. It is built by following the directory tree hierarchy, with components separated by a slash ("/"), a backslash ("\"), or a colon (":"). Resource can be accessed by Absolute or relative paths.Read more

HTML File Path

An HTML file path specifies the location of a certain file within the folder structure of a website. The HTML file path is used in your website folder structure to describe an image, audio, video, CSS, JavaScript file, or display another website's page.

The HTML file paths are often contained in the "src" and "href" attributes.
Many computers, particularly web servers, are case-sensitive and cannot effectively handle space. It has the potential to cause an error on your website. Always use lower case letters for file names, and use the "dash" (-) or underscore (_) character to separate words. These symbols are used as a word separator in computers and programming languages.

Absolute Path

An absolute or full path points to the same location in a file system, regardless of the current working directory. It must contain the root directory in order to do so. This searches from the root up to the file following the provided path, starting with the drive latter "c:/" for local storage and "domain-name.com" for online storage.
Note: This should only be used if the file is hosted to avoid broken or missing files, as files on our local storage can easily be migrated, necessitating a path change. It is great practice to use relative paths when accessing local files.

Example

<!-- Hosted-->
<img src="https://domain-name.com/picture/nature.jpeg">
<!-- Local meachen-->
<img src="c:/windows/user/documen/project/picture/nature.jpeg">

Relative path

A relative path starts from some given working directory, avoiding the need to provide the full absolute path. A filename can be considered as a relative path based on the current working directory. If the working directory is not the file's parent directory, a file not found error will result if the file is addressed by its name.

Here you can see the four types of examples on relative file paths.

  1. When the file is located in the same folder as the current page,
  2. when the file is in a folder one level lower than the current page
  3. When the file is one level higher in the folder than the current page.
  4. And another process is working from the root.

*Let us explain them one by one

The same folder

You only need to supply the file's name if the file is in the same folder as the current page.

<img src="logo.png" alt="logo">

To access a file in the same folder in frameworks such as ReactJS, you must use the "./" to indicate it is in the same folder.

import './style.css'

One level down the folder

When the file is located in the one-level down folder from the current page, then the relative file path write in this process.

<img src="image/nature.jpeg" alt="beautiful nature">
<link rel="stylesheet" href="css/style.css">

Two-level down

When the file is located in the two-level down folder, then the file path writes in this process.

<img src="all/image/nature.jpeg" alt="beautiful nature">

One level up folder

When the file is located in the one level up folder, then the file path write in this process

<img src="../logo.png" alt="logo">

Two-level up

When the file is located in the two-level up folder, then the file path writes in this process.

<img src="../../image/nature.jpeg" alt="beautiful nature">

Working from the root

When the file is two or more levels up to location from the current page, then here is a short process, working from the root directory. This HTML file path sends the browser to the root directory of the web page. And then the browser will find the particular file.

<img src="/image/nature.jpeg" alt="beautiful nature">
<link rel="stylesheet" href="/css/style.css">

Chapter Summary

HTML file paths are the root to link one file to another. The "src" and "href" attributes contain the file path link. In the HTML file path, you can see two types of paths. One is the absolute file Path and the Relative File Path.

Congratulations

It has been a long learning process, and I hope you understand the above-mentioned subject.

Give feedback

If you enjoyed and learned something new from this article, follow me for More web simplified topics, and do well to give me feedback by using the reaction emojis. Let me know how you feel about the explanation in the comment section. Give feedback, corrections, and recommendations.
Much 🥰

Let us connect

I would like to connect with any and every reader
Let us connect
victorjosiah19@Twitter
josiah-victor@LinkedIn