HTML file paths are used to locate resources such as images, stylesheets, scripts, and other files within a web page. There are two types of file paths that can be used in HTML:
- Absolute file paths: These are file paths that specify the full URL or web address of the file on the internet, starting from the root directory of the web server. Absolute file paths always begin with a forward slash (“/”) and include the domain name of the website.
- An absolute file path is a complete path that starts from the root directory of a file system and includes all necessary directories and subdirectories to locate a specific file.
- For example, on a Unix-like system, an absolute file path might look like this:
/home/user/documents/example.txt- In this case, the root directory is represented by the forward slash
/. The fileexample.txtis located in thedocumentsdirectory, which is in turn located within theuserdirectory, which is located within thehomedirectory. The full path specifies each of these directories in order, starting from the root directory. - Similarly, on a Windows system, an absolute file path might look like this:
C:\Users\User\Documents\example.txt- In this case,
C:is the drive letter indicating the root directory, followed by theUsersdirectory, then theUsersubdirectory within it, then theDocumentssubdirectory within that, and finally the fileexample.txt. - In both cases, the absolute file path provides an unambiguous way to locate a specific file on the system.
Example: <img src="https://example.com/images/pic.jpg" alt="example image">
- Relative file paths: These are file paths that specify the location of the file relative to the current web page or the location of the file itself. Relative file paths can be either absolute or relative.
a. Absolute relative file paths: These are file paths that specify the full path to the file, starting from the root directory of the website. Absolute relative file paths always begin with a forward slash (“/”).
Example: <img src="/images/pic.jpg" alt="example image">
b. Relative relative file paths: These are file paths that specify the location of the file relative to the current web page. Relative relative file paths do not include the domain name of the website and can use either a relative or absolute path.
Example: <img src="../images/pic.jpg" alt="example image"> (This example would navigate up one level in the directory hierarchy before finding the “images” folder.)
