HTML
HTML File Paths
File paths are the addresses that tell web browsers where to find files on a website. In this tutorial, we explain file paths, their use in HTML, and the difference between absolute and relative file paths.
Learning Outcomes
- Learn how to write file paths in HTML.
- Understand the purpose of file paths.
- Identify and use absolute file paths with full URLs.
- Identify and use relative file paths based on file location.
- Use the correct notations such as
./,/, and../. - Choose between absolute and relative paths for different needs.
The Role of File Paths in HTML
File paths in HTML link your document to external files. They appear in elements such as <img>, <a>, <link>, and <script>. These paths tell the browser where to locate images, style sheets, scripts, and other HTML pages.
For example, when you include an image, you can write:
<img src="images/picture.jpg" alt="A beautiful view">
The src attribute contains a file path that directs the browser to the image file in relation to the current HTML document. File paths help load all your resources correctly, whether you work on your local machine or publish your site online.
Types of File Paths
There are two main types of file paths used in HTML:
- Absolute File Paths
- Relative File Paths
Each type has its place depending on whether you're linking to resources on an external server or within your own website’s folder structure.
Absolute File Paths
Absolute file paths use the complete URL to locate a file. They start with a protocol (http:// or https://) and include each folder and file name. Absolute paths let you reference files on external servers. They work well for files hosted on a CDN.
Syntax
An absolute file path looks like this:
<img src="https://www.example.com/images/picture.jpg" alt="Example Image">
Examples
Using an Absolute File Path for an Image:
<img src="https://www.example.com/assets/img/banner.jpg" alt="Banner Image">
Using an Absolute File Path in a Hyperlink:
<a href="https://www.example.com/docs/overview.html">View Documentation</a>
Use absolute paths for external resources or when you must reference the exact file location.
Relative File Paths
Relative file paths point to files using the current HTML file's location. They help you link to internal resources and keep your code working across different environments, such as local development and production. Relative paths do not include the domain name; they rely on the file's position in the folder structure. Below are several examples that show how file location affects the file path.
File Located at the Root of the Current Website
To reference a file that resides at the root level, begin the path with a forward slash (/).
Example:
<img src="/images/logo.png" alt="Site Logo">
This tells the browser to look for the images folder directly in the root directory of your website.
File Located in the Current Folder
If the file is in the same folder as your HTML document, simply provide the path relative to the current location.
Example:
<img src="images/banner.jpg" alt="Banner">
Here, the browser searches for an images folder within the same directory as the HTML file.
File Located One Level Up from the Current Folder
Use the ../ notation to move up one directory level from the current file's location.
Example:
<img src="../images/hero.jpg" alt="Hero Image">
The ../ instructs the browser to navigate up one folder before finding the images directory.
When to Use Absolute vs. Relative File Paths
Choosing between absolute and relative file paths depends on your specific needs:
- Absolute File Paths are ideal when referencing resources that reside on external servers or content delivery networks (CDNs). They provide a fixed path that will work regardless of the location of your HTML file.
- Relative File Paths are the best option for linking to resources within your own website. They ensure that links remain valid whether your site is hosted locally during development or on a live server after deployment. Additionally, relative paths can simplify maintenance when moving files between directories or domains.
A good rule of thumb is to use relative paths whenever possible for internal links, and reserve absolute paths for external resources.
FAQs on HTML File Paths
Is a file path the same as a URL?
A file path is similar to a URL in that it directs the browser to where a file is located. However, a URL is typically used to reference external resources on the internet with a full address, while a file path can be relative to the current document's location.
How do I hyperlink a file path in HTML?
To hyperlink using a file path, use the <a> tag and set the href attribute to the desired file path. For example:
<a href="docs/tutorial.html">Read the Tutorial</a>
This will create a clickable link that takes the user to the specified file relative to the current HTML document.
How do I write a file path?
File paths are written based on the file's location relative to the HTML document:
- Use an absolute file path with a full URL for external resources.
- Use a relative file path for internal links, employing notations such as
./for the current directory,/for the root directory, and../for one level up.