In HTML file paths are the location of a file(s) within a web folder. It groups related files together in a folder for easy accessibility and navigation. Common examples of files that require a folder(a file path) are: your images, your scripting languages, your stylesheets, and your index.html. The file path(s) helps the browser know where to look when an external link containing your images, scripts, index.html are inserted into the web page. With specified file path(s), you get into less trouble and your code is better organized.
File path(s) are of two types:
- Absolute File Path
- Relative File Path
ABSOLUTE FILE PATH
An absolute file path specifies the full Uniform Resource Locator(URL) of a file. It usually begins with https://…
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML File Path</title>
</head>
<body>
<h2>Absolute File Path</h2>
<a href="https://hubtolearn.com">The Ultimate Learning Technologies for Absolute Beginners and Advance.</a>
</body>
</html>
RELATIVE HTML FILE PATHS
A relative file path is quite simple. It points to a section within a specified folder of the current web page. Take a tree, for example: the branch is an essential part of the tree. Therefore, the branch is relative to the tree’s root because they both share the same folder, which is the tree.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML FILE PATH</title>
</head>
<body>
<h2>Using a Relative File Path</h2>
<img src="images/picture.jpg" alt="Mountain" style="width:300px; height:200px;">
</body>
</html>
In this example, the image is the name of the folder, hence the file path. The picture is located inside the image folder, making it relative to the image folder.
COMMON HTML FILE PATHS EXAMPLES
- <img src=”lion.jpg”>: This file path tells the browser that the lion image file is located within the same folder as that of the current web page.
- <img src=”images/lion.jpg”>: This file path tells the browser that the lion image file is located in the images folder.
- <img src=”/images/lion.jpg”>: This file path tells the browser that the lion image file is located in the image folder at the root of the current web folder.
- <img src=”../lion.jpg”>: This tells the browser where the lion image file is located. The first period represents the current directory, and the second period is a folder one level above the current directory.
GOOD CODE PRACTICE
It is best to use relative file paths in your web pages so that all links will work on your localhost(your own computer). Using an absolute file path isn’t very safe, as someday the link to the other website may crash or be permanently deleted.
Also, ensure that the spellings of the file names are correctly spelt as used in the folder of your relative file path when referencing.
For More blogs, visit.
