Ultimate Guide To HTML File Path [step by step]

  • Post category:HTML
  • Post author:
  • Post last modified:April 10, 2022
  • Reading time:8 mins read
You are currently viewing Ultimate Guide To HTML File Path [step by step]

When you are building a website there are many files like HTML, CSS, Multimedia, and JavaScript. You need to link these files one to another in a meaningful way, that’s called an HTML file path.

Making any mistakes in linking one to another, will cause an error in your website. So in this article, you are going to learn about the HTML file path, Types of the file paths, and how to link one to another without any mistakes.

HTML File Path

An HTML file path defines the location of the particular file in a website folder structure. The HTML file path is used to define an image, audio, video, CSS, JavaScript file, or display other websites document in your website folder structure.

Mostly “src” attribute and the “href” attribute contain the HTML file paths.

<img src="/images/picture.png">
<audio src="https://sitecodings.com/audio/audio.mp3">

Many computers mostly web servers are case sensitive, and also they can’t properly handle space. It can make an error on your website. So always remember to give file names in lower case letters and separate words with the “dash” (-) or underscore (_) symbol. Computers and program languages use these symbols as a word separator.

How To Write an HTML File Path – (Syntax)

In simple words basically, HTML file paths are the route to link one file to another. So that we can easily access website files. And sometimes it is used to connect external resources.

The <link> tag are use to link external resources files In HTML.

And The “src” attribute and the “href” attribute contain the HTML file path actual link on a HTML tag. Here we explain file path types and how to write file paths.

File Path – Example

<!-- Link to External CSS -->
<link src="css/external_css.css">

<!-- Link an image in HTML -->
<img src="my_image.jpeg">

<!-- Link To Another Page -->
<a href="new_page.html">New Page</a>

File path Types

HTML file path

In HTML there are two types of file paths. One contains the full URL structure of a file it will work only on the server-side. And other types only contain the folder structure. This is the best way to link external files because it works locally.

  • Absolute file path
  • Relative file path

Absolute File path

The absolute file path contains the full URL address of the file. The absolute file path works only on the server.

<img src="https://sitecodings.com/picture/nature.jpeg">

Relative File path

The relative file paths contain only the folder structure of the file. It completely works on your local computer.

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 located in one level-down folder from the current page.
  3. when the file is located one level up the folder from the current page.
  4. and another process is working from the root.

Here is an example of the relative file paths.

Located in the same folder

When the file is located in the same folder as the current page, the relative file path is written in this process.

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

Located in the 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">

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

Located in the 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">

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.
  • Always Working from the root is the best way to link files in HTML.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply