File paths
A website is just a collection of files and folders stored on a computer. File paths are addresses for files on the web. It is also known as Uniform Resource Locator(URL). There are many elements in HTML that require a valid file path:
- img
- a
- audio
- video
- link
- script
- iframe
There are two kinds of ways to specify a file path.
- Absolute URL
- Relative URL
Consider the following file structure as an example for a website:
Absolute URL
Consider the image file example-1.png inside the image folder. In order to reference that image, we can use the whole path to that image. This path consists of the transfer protocol(http:// or https://), website name(also known as a domain name), followed by the list of folders(also called directories) to reach the file, and the file name. Each part is seperated by a forward slash(/). This is known as an absolute URL.
<img src="https://www.example.com/images/example-1.png" alt="Example image">
Using this format we can determine the absolute URL of any file on the internet.
If you are linking to an external website there is always a possibility that the website might get shut down. You should periodically monitor your site to see if any link is broken or not.
Relative URL
There is another way to link to files in your website. This method is known as relative URL. In this method, you provide the path of the file relative to your current web page.
In the above example, image considers you are working on index.html under the html folder. To use the image example-1.png in the same folder, we can use only the file name as a relative URL. This is true for any file in the same folder as the HTML file.
<img src="example-1.png" alt="example image">
If the file to be linked is inside a folder which is in the same folder as the HTML file then we use the folder name followed by a forward slash(/) and the file name. In the above example site if you need to get to main.css and your current file is the index.html file which is directly inside the website folder, then you have to specify css/main.css as the relative URL.
<link rel="stylesheet" href="css/main.css">
If the main.css file was in another folder main inside the css folder then we have to specify the relative URL as css/main/main.css. This can be repeated for any number of levels of folders to reach the file.
Now if we want to go a level up instead of down, then we need to use ../ for that purpose. Consider that we are working on the index.html file inside the html folder. We want to link to the index.html file one level above it. The code would look like:
<a href="../index.html">The file in the level above this file.</a>
If the file was two levels above we can use ../../index.html and so on for further levels above. We can reach any file in the same website by combining the above techniques. For example, if we are currently working on the index.html file inside the html directory and we want to link to main.css inside the css directory, we can combine the two techniques to obtain the file path.
<link rel="stylesheet" href="../css/main.css">
Each time an absolute URL is used the browser looks up the address of the website to determine the location of the server. So only use absolute URL for external websites. Use relative URL for files within your website.
If the files are moved or removed both the absolute and relative URLs will not work. You have to update the links to make them work.
Base element
Usually, when you are using relative URLs the paths are relative to the current web page. By using the base element you can specify a URL that would be used as a base for all the relative URLs in the page. It accepts two attributes. The href is used for specifying the base URL and target attribute is used to set the default target for links.
<base href="https://www.example.com/images/" target="_blank">
The base element should be provided inside the head section.