HTML File Paths

A file path is the location of a file, image, or media. This means giving the browser the address of the location where the file is kept. So that the file can be accessed with this address. Must remember,Each file has a specific extension. For example, an image file path looks like this: images/flower.jpg . There are two types of file paths: absolute path and relative path.

Absolute Path

The address where the file is stored starting from the file system. This is the Absolute Path.

Local Absolute Path:

file:///D:/Images/flower.jpg

Server Absolute Path:

https://myschoolhouse.in/assets/images/flower.jpg

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<img src="https://myschoolhouse.in/assets/images/flower.jpg" alt="flower">
</body>
</html>

Try it Yourself

Relative Path

The location where the file is stored and the location from which the file will be displayed, its address. This is the Relative Path.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<img src="/assets/images/flower.jpg" alt="flower">
</body>
</html>

Try it Yourself

How to set file path

First create an index.html file and an assets folder. after that, you have to create an images folder inside the assets folder. an image with any name should be kept inside this images folder. after that, go to the index.html file and provide the path within the src="" attribute of the <img src="" alt=""> tag (assets/images/flower.jpg).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<img src="/assets/images/flower.jpg" alt="flower">
</body>
</html>

Try it Yourself

How to access the back file

To access the file back ' ../' is used. Remember, for the file where the path will be set, you need to use '../' as many times as there are folders inside that file. The method has been shown below.