An absolute path specifies the full path from the root directory of the file system to the file. It is independent of the location of the current document.
In contrast, a relative path specifies the path to the file based on the directory of the current document. It changes depending on the current location of the document.
Absolute Path
A path that starts from the root (/, ROOT) directory, which is the topmost directory on the server.
For example, '/var/log/mail/' or 'C:\Users\Username\Documents' on Windows.
Relative Path
A path that is specified based on the current directory. The current directory is denoted by '.', and the parent directory is denoted by '..'.
If there is a '/var/log/mail/' directory and a '/var/home/' directory, the relative path from the current '/mail/' location to '/home/' is '../../home/'. Also, the relative path from '/log/' to '/mail/' is './mail/'.
HTML Example Code
Here is an example of specifying file paths in HTML.
<!-- Absolute path for an image -->
<img src="https://www.example.com/images/image.jpg" alt="Example Image">
<!-- Relative path to navigate to another page -->
<a href="../about.html">About</a>Example of Image File Paths
Here is an example of setting paths for image files.
<!-- Relative path -->
<img src="../images/picture.jpg" alt="Picture">
<!-- Absolute path -->
<img src="https://www.example.com/images/profile.jpg" alt="Profile Picture">Example Paths Related to Document Display
Here are examples of linked paths between documents.
<!-- Another HTML document within the current folder -->
<a href="another-page.html">Link to Another Page</a>
<!-- Document in the parent folder -->
<a href="../parent-page.html">Link to Parent Page</a>The above examples provide common instances of absolute and relative paths used when writing HTML documents.
