HTML Paths Explained in Detail

The file path describes to location of a file in the website’s folder.

Examples include:

• href="example.html" - The file is in the same folder as the current file.

|you_website_folder/
  |currentFile.html
  |example.html

• href="folder/example.html" - The file is in a subfolder named “folder”.

|you_website_folder/
|  |folder/
|  |  |example.html
|  |currentFile.html

• href="../example.html" - The file is in the parent folder of the current file.

|you_website_folder/
|  |folder/
|  |  |currentFile.html
|  |example.html

• href="/example.html" - The file is in the root folder of the website.

|you_website_folder/
|  |example.html
|  |folder/
|  |  |currentFile.html

• href="https://example.com" - The file is on an external website.

|you_website_folder/
|  |currentFile.html
|  |folder/
|  |  |example.html
# it does not matter where the file is located, as it is an external link

What can file paths link to?

File paths can link to various resources, including:

• HTML files
• CSS files
• JavaScript files
• Images
• Videos
• Audio files
• Documents (PDF, Word, etc.)
• Other web pages

How to use file paths in HTML

To use file paths in HTML, you typically use the href attribute in anchor (<a>) tags for links, or the src attribute in image (<img>) and script (<script>) tags for resources. Here are some examples:

<a href="example.html">Link to Example</a>
<img src="images/photo.jpg" alt="A photo" />
<script src="scripts/app.js"></script>

Relative vs. Absolute Paths

File paths can be either relative or absolute:

• Relative Paths: These paths are relative to the current file’s location. They do not start with a slash (/) and are used to link to files within the same website or project. For example, href="folder/example.html" is a relative path.

• Absolute Paths: These paths start with a slash (/) and specify the full path from the root of the website. They are used to link to files that are not in the same folder as the current file. For example, href="/folder/example.html" is an absolute path.

Best Practices for Using File Paths

• Use relative paths for linking to files within the same website or project. This makes it easier to move files around without breaking links.
• Use absolute paths for linking to files that are hosted on a different domain or when you want to ensure the link always points to the same resource, regardless of the current file’s location.
• Keep your file structure organized to make it easier to manage paths.
• Use meaningful names for files and folders to improve readability and maintainability.
• Test your links to ensure they work correctly, especially after moving or renaming files.