A file path describes the location of a file in a web site's folder structure.
File Path Examples
The "picture.jpg" file is located in the same folder as the current page | |
The "picture.jpg" file is located in the images folder in the current folder | |
The "picture.jpg" file is located in the images folder at the root of the current web | |
The "picture.jpg" file is located in the folder one level up from the current folder |
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
- Web pages
- Images
- Style sheets
- JavaScripts
Absolute File Paths
An absolute file path is the full URL to a file:
Example
Try it Yourself »
The It specifies that picture.jpg is located in the same folder as the current page.
File paths are used on webpages to link external files like:
- Web pages
- Images
- Style sheets
- JavaScript
There are two types of File Paths:
- Absolute File Paths
- Relative File Paths
Absolute File Paths
Absolute file path specifies full URL address.
Example:
Test it NowRelative File Paths
The relative file path specifies to a file which is related to the location of current page.
Example:
Let's take an example to see how the file path points to a file in the images folder located at the root of the current web.
Test it NowExample:
This is how a file path points to a file in the images folder located in the current folder.
Test it NowExample:
When the images folder located in the folder one level above the current folder.
Test it NowImportant Points for File path:
- Always remember to use proper URL, file name, image name, else it will not display on the webpage.
- Try to use relative file paths, so that your code will be independent of URL.
View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
A file path specifies the location of a file inside a web folder structure. Its like an address of a file which helps the web browser to 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. For example, the syntax [
Relative File Path: It describes the path of
the file relative to the location of the current web page file.
Example 1: It shows the path of the file present in the same folder of the current web page file.
html
Relative file path
File present in the same folder
Output:
Example 2: It shows the path of the file present in a folder above the folder of the current web page file. The image file
present in a folder called images and current web page file exists inside a sub folder, then the code will be as follows:
html
Relative file path
File present in a folder above the current folder
Output:
Example 3: It shows the path of the file present in a folder which is located at the root of the current sub directories.
html
Relative file path
File present in a folder which is located at
the root of the current subdirectories
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.