HTML
File Path

A website consists of many files such as text content, code, media, stylesheets and so on. When you’re building a website, you need to assemble these files into a sensible structure on your local machine so you can easily upload them to a server.

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 to access the files.

File Path Types

File paths are of two types:

Absolute File Paths: It describes the full address (URL) to access an internet file.

Copy Code 


<!doctype html>  
<html>

    <head>
        <title>Absolute File Path</title>
    </head>

    <body>
        <a href=”https://phpdocs.com/”>
    </body>

</html>

Relative File Paths: It describes the path of the file relative to the location of the current web page file.

Copy Code 


<!doctype html>  
<html>

    <head>
        <title>Relative File Path</title>
    </head>

    <body>
        <img src=”phpdocs-logo.png”>
    </body>

</html>

File Path Accessing

PathDescription
<img src=”picture.jpg”>picture.jpg is located in the same folder as the current page
<img src=”images/picture.jpg”>picture.jpg is located in the images folder in the current folder
<img src=”/images/picture.jpg”>picture.jpg is located in the images folder at the root of the current web
<img src=”../picture.jpg”>picture.jpg is located in the folder one level up from the current folder