Training

Boost Your Online Marketing

Understanding HTML Links on Your Homepage

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.

The Link, How It is Coded

Code of an HTML link:

HTML Link mit Pfund Zeichen
HTML link with pound sign

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.

The Link with an Absolute 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.

Absolutes HTML Link
Absolute HTML Link

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.

The Link With a Relative Address

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.

Relatives HTML Link
Relative HTML Link

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

Relatives HTML Link
Relative HTML Link

Now it goes one step further.

Relatives HTML Link 1 Ebene
Relative HTML Link 1 Level

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).

Relatives HTML Link Level 2
Relative HTML Link Level 1

The two dots and the line can also be repeated further.

Relatives HTML Link 2 Ebenen
Relatives HTML Link 2 Ebenen

So the current directory can still be one or more levels below the current directory.

Absolute vs Relative HTML Links

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.

Conclusion: The Path Makes the Working Link

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