File Path
In HTML, file paths are used to specify the location of resources such as
- Images
- CSS stylesheets
- JavaScript files
- Other linked files
There are two main types of file paths
1. Relative File Path
2. Absolute File Path
1. Relative File Path
A relative file path points to a file based on the current location of the HTML file. It is the most commonly used type for local projects.
Example: Files in the same directory
Example: File in a subdirectory
Example: File in the parent directory
2. Absolute File Path
An absolute file path gives the complete location of the file, either on your local computer or from a liver URL.
Example: Full file system path (for local use only not recommended for web)
Example: Root-based absolute path (used in web servers)
Example: Full URL path (absolute link to external resources)
Tips
1. Relative File Path
2. Absolute File Path
1. Relative File Path
A relative file path points to a file based on the current location of the HTML file. It is the most commonly used type for local projects.
Example: Files in the same directory
<!DOCTYPE html> <html> <head> <title>Files in the same directory</title> </head> <body> <img src="image.jpg"> </body> </html>
Example: File in a subdirectory
<!DOCTYPE html> <html> <head> <title>File in a subdirectory</title> </head> <body> <img src="images/image.jpg"> </body> </html>
Example: File in the parent directory
<!DOCTYPE html> <html> <head> <title>File in the parent directory</title> </head> <body> <img src="../image.jpg"> </body> </html>Relative paths are flexible and better for websites that may move folders or get uploaded to a server.
2. Absolute File Path
An absolute file path gives the complete location of the file, either on your local computer or from a liver URL.
Example: Full file system path (for local use only not recommended for web)
<!DOCTYPE html> <html> <head> <title>Full file system path</title> </head> <body> <img src="C:/quipoin/asset/image/image.jpg"> </body> </html>These paths would not work on websites because browsers can not access local file paths from the internet.
Example: Root-based absolute path (used in web servers)
<!DOCTYPE html> <html> <head> <title>Root-based absolute path</title> </head> <body> <img src="/assets/images/image.jpg"> </body> </html>Begins from the root / of the domain.
Example: Full URL path (absolute link to external resources)
<!DOCTYPE html> </html> <head> <title>Full URL path</title> </head> <body> <img src="https://example.com/images/image.jpg"> </body> </html>This is how you embed resources hosted on another website.
Tips
- Use relative paths for internal resources (local projects or same server).
- Use absolute URL for external content (like CDN image or scripts).
- Avoid using local file system paths in deployed websites.