Blog

Online Marketing noch besser machen

HTML Links auf deiner Homepage verstehen

Dir ist es wahrscheinlich auch schon passiert, dass eine Seite oder ein Bild sich auf einer Homepage nicht richtig anzeigen. Damit die Besucher auf deiner Homepage eine möglichst ruckelfreie Erfahrung haben: verstehe wie Links funktionieren, befasse dich damit. So vermeidest du Fehlanzeigen und kannst sie gegebenenfalls ohne viel Aufwand korrigieren.

Das Link, wie es codiert wird

Code eines HTML Links:

HTML Link mit Pfund Zeichen
HTML Link mit Pfund Zeichen

Beim Klick des Links wird das Resultat die gleiche Seite sein - das wird jetzt gleich näher erklärt. Der Inhalt "LINK zu einer Seite" ist die sichtbare Bezeichnung des Links. Die Eigenschaft href enthält die Adresse des Links, hier #. Das HTML Start und End Tag "a" macht den Inhalt zum Link.

Ob ein Link tatsächlich funktioniert hängt hauptsächlich von der Adresse des Links ab. Ist die Adresse korrekt zusammengestellt, kann die Verbindung entstehen. Erfahre nun über die zwei Varianten einer Adresse.

Das Link mit einer absoluten Adresse

Anstatt des # Zeichens wird nun die Adresse zu einer anderen Seite angegeben - als Pfad. Und zwar so, dass es sich um die genaue Internetadresse handelt. Die Adresse ist vergleichbar mit einer Anschrift oder GPS Koordinaten.

Absolutes HTML Link
Absolutes HTML Link

Der hier gezeigte Pfad, der mit "https..." beginnt, ist eine verschlüsselter Uniform Resource Locator (kurz: Url). Die Ressource produkte.html befindet sich auf dem Domain www.meineseite.com.

Das Link mit einer relativen Adresse

Im Gegensatz zur absoluten Adresse ist die relative Adresse, weniger exakt. Hier wird angenommen, dass du genau weisst, wo du dich befindest, bzw. das Computersystem weiss das. Dann kann auch die Ressource gefunden werden (siehe Abbildung weiter unten). Und zwar relativ zum aktuellen Ort.

Relatives HTML Link
Relatives HTML Link

Anstatt der gesamten Internetadresse fällt der erste Teil des Pfades weg. Es verbleibt ein Verzeichnis "bilder" in dem sich die Datei bild1.png befindet. Das Verzeichnis ist relativ zum aktuellen Verzeichnis. Am Besten zeige ich dir die Ordnerstruktur:

bilder > bild1.png

Relatives HTML Link
Relatives HTML Link

Nun geht es noch einen Schritt weiter.

Relatives HTML Link 1 Ebene
Relatives HTML Link 1 Ebene

Das Bild befindet sich nun im Ordner parallel zum jetzigen Ort. Also sieht das dann so aus:

Aktuelles Verzeichnis hoch zu -> Anderes Verzeichnis runter zu -> bilder > bild2.png

Relatives HTML Link Level 2
Relatives HTML Link Level 1

Die zwei Punkte und der Strich können überdies beliebig wiederholt werden.

Relatives HTML Link 2 Ebenen
Relatives HTML Link 2 Ebenen

Damit kann das Aktuelle Verzeichnis noch ein oder mehrere Level unter dem jetzigen Aktuellem Verzeichnis sein.

Absolute vs relative HTML Links

Auf dem ersten Blick scheint es intuitiver absolute Adressen zu verwenden. Konstruiert du jedoch deine Seiten erst einmal auf deinem PC und stellt du sie später Online, ist die zweite Variante die flexiblere Lösung.

So stimmt nur ein Teil der absoluten Adresse auf dem lokalen Computer mit der Adresse Online überein. Das bedeutet bei der Veröffentlichung einer Seite extra Aufwand. Die absolute Adresse muss jedes Mal umgestellt werden.

So ist es letztendlich in dieser Situation zeitsparender gleich die relative Adresse für Links und Dateien zu verwenden.

Fazit: Der Pfad macht das funktionierende Link aus

HTML Links können in zwei Varianten verwendet werden. Sie nutzen entweder eine absolute oder relative Adresse. Die absolute Adresse enthält einen vollständigen Pfad. Die relative Adresse hingegen, nur einen Teil des Pfades. Welche Adresse weniger Aufwand bedeutet, hängt von deinem Einsatz ab.

Weiterführende Links

Easy Homepage Navigation für Smartphones und PCs erstellen

Autor/in: Iris Mitlacher