You have probably already experienced that a page or an image does not display correctly on a homepage. To make sure that the visitors on your homepage have a smooth experience: understand how links work, get involved. That way you can avoid misdisplays and correct them without much effort.
Code of an HTML link:
When you click the link, the result will be the same page - this will be explained in more detail in a moment. The content "LINK to a page" is the visible name of the link. The property href contains the address of the link, here #. The HTML start and end tag "a" mark the content a link.
Whether a link actually works depends mainly on the address of the link. If the address is put together correctly, the link can be created.
Now learn about the two variants of an address.
Instead of the # character, the address to another page is now given - as a path. And in such a way that it is the exact internet address. The address is comparable to an address or GPS coordinates.
The path shown here, which starts with "https...", is an encrypted Uniform Resource Locator (short: Url). The resource products.html is located on the domain www.meineseite.com.
Unlike the absolute address, the relative address is less accurate. Here it is assumed the computer system knows exactly where you are. Then the resource can also be found (see figure below). And this is relative to the current location.
Instead of the entire Internet address, the first part of the path is omitted. A directory "images" (Bilder) remains in which the file image1.png (bild1.png) is located. The directory is relative to the current directory (Aktuelles Verzeichnis). Here is the folder structure:
bilder > bild1.png
Now it goes one step further.
The image is now in the folder parallel to the current location. So it looks like this:
Current directory (Aktuelles Verzeichnis) up to -> Other directory (Anderes Verzeichnis) down to -> pictures (bilder) > picture2.png (bild2.png).
The two dots and the line can also be repeated further.
So the current directory can still be one or more levels below the current directory.
At first glance, it seems more intuitive to use absolute addresses. However, if you first construct your pages on your PC and later put them online, the second variant is the more flexible solution.
Only a part of the absolute address on the local computer will match the address online. This means extra effort when publishing a page. The absolute address must be changed every time.
In this situation it is clearly more time-saving to use the relative address for links and files.
HTML links can be used in two ways. They use either an absolute or relative address. The absolute address contains a complete path. The relative address, on the other hand, contains only a part of the path. Which address means less effort depends on your usage.
Autor/in: Iris Mitlacher