In the following article, Mytour will further introduce you to HTML File Paths. Additionally, readers can refer to some other articles already available on Mytour to learn about JavaScript in HTML.
Types of HTML File Paths
Table of Contents:
1. File Paths in HTML
2. Absolute File Paths in HTML
3. Relative File Paths in HTML
4. Considerations When Using File Paths in HTML
1. File Paths in HTML
File paths in HTML are used to describe the location of a file within a website's directory. Think of file paths like addresses for web browsers. To link external resources and incorporate them into HTML files, we can use file paths for images, files, CSS files, JS files, videos, and more.
The src or href attributes require an additional attribute to link external sources with HTML files.
Below is a table consisting of various types of file paths in HTML:
File paths are utilized on websites to link external files such as:
- Web pages
- Images
- Cascading Style Sheets
- JavaScript Files
There are 2 types of file paths in HTML, including:
- Type 1. Absolute File Path.
- Type 2. Relative File Path.
2. Absolute File Path in HTML
Absolute file path in HTML specifies the full URL address.
Example: Below is an example of absolute file path in HTML:
The returned result after using absolute file path looks like the following:
3. Relative File Path in HTML
Relative file path in HTML specifies a file related to the location of the current page.
Example 1: refer to the example of relative file path in HTML below:
In the example below, the file path points to a file in the image directory located within the root directory of the current website page.
The returned result is as follows:
Example 2: In this example, the file path points to a file in the image directory within the current directory:
The returned result is as follows:
Example 3: In this example, the image directory is located in the same directory at the same level as the current directory:
The returned result is as follows:
4. Some considerations when using file paths in HTML
- Make sure to use URLs, file names, and image names correctly, otherwise these elements will not display on the web page.
- Use relative file paths to remain independent of URLs.
This article above introduces you to file paths in HTML. Additionally, readers can explore other articles on Mytour to learn about the id attribute in HTML. In the upcoming articles, Mytour will further introduce you to the head element in HTML.