Directory issues in basic HTML (difference between relative paths and absolute paths)

Relative path - The directory path is created based on the location of the web page that references the file. Therefore, when web pages stored in different directories refer to the same file, the paths used will be different, so it is called relative.

Absolute path - directory path based on the root directory of the Web site as the reference. The reason why it is called absolute means that when all web pages refer to the same file, the path used is the same.

In fact, the difference between an absolute path and a relative path is only the difference in the reference points used when describing the directory path. Since the root directory reference point is the same for all files on the website, the path description method using the root directory as the reference point is called an absolute path.

The following are several special symbols used to establish a path and their meanings.

.--Represents the directory you are currently in.

..--Represents the previous level directory.

/-- represents the root directory.

Next, let's assume that the web site that the reader has the directory path as shown in the figure below.

If you want to refer to the BeRef.gif file in the Ref.htm file, its relative path is as follows:

./SubDir2/BeRef.gif

In the reference path above, . represents the current directory (Dir1), so ./SubDir2 represents the current directory SubDir2. In fact, you can also omit ./ directly quote it in this way.

SubDir2/BeRef.gif

If you use an absolute path to refer to the file with the root directory as the reference point, the reference path is as follows:

/Dir1/SubDir2/BeRef.gif

If the directory structure of the web site is as shown below

What is the relative path to refer to the BeRef.gif file?

If you want to refer to the BeRef.gif file in the Ref.htm file, its relative path is as follows:

../SubDir2/BeRef.gif

In the reference path above, .. represents the previous directory, so /Dir2 represents the Dir2 subdirectory under the previous directory. If using absolute path reference, the reference path is as follows:

/Dir2/BeRer.gif

Let’s give another relatively complex example to compare the use of relative paths and absolute paths. Suppose that in the web site established by the reader, there is a directory path as shown in the following figure.

We use a table to illustrate the relative and absolute paths that should be used when a file refers to another file in the case of the figure above.

What needs to be explained in the comparison in the above table is the meaning represented by.../../.

.. represents the previous directory, while ../../ represents the previous directory of the previous directory. Therefore, it can be seen from the above table that if the referenced file exists in the subdirectory of the current directory, or in another subdirectory of the previous directory, it is more convenient to use the relative path. If not, then just use the absolute path, which is easier to save trouble. From the above table, it can also be seen that when the same file is referenced, the absolute path used to reference the file is the same.