Inhaltsverzeichnis

HTML-Links (Hyperlinks)

Links sind das fundamentale Baustein-Element des Webs[cite: 5]. Sie ermöglichen die Navigation zwischen verschiedenen HTML-Dokumenten, Mediendateien, externen Webseiten oder Abschnitten innerhalb einer Seite[cite: 5].

1. Das <a>-Element und das href-Attribut

Hyperlinks werden mit dem Anchor-Tag <a> erstellt[cite: 5]. Das Pflichtattribut href (Hypertext Reference) gibt die Ziel-URL bzw. den Pfad der Ressource an[cite: 5]. 

<a href="URL">Linktext oder Bild</a>

Verlinkbare Ressourcen sind unter anderem[cite: 5]:

2. Absolute vs. Relative URLs

URL-Typ Beschreibung Beispiel
Absolute URL Enthält das vollständige Protokoll (z. B. http:// oder https://) und führt zu externen Ressourcen[cite: 5]. https://www.example.com/index.html[cite: 5]
Relative URL Beschreibt den Pfad zur Zieldatei ausgehend vom aktuellen Dokument auf demselben Server[cite: 5]. recipes/salmon.html[cite: 5]

Für Verweise auf externe Webseiten außerhalb des eigenen Servers muss eine absolute URL inklusive Protokoll verwendet werden[cite: 5]: 

<li><a href="http://www.foodnetwork.com">The Food Network</a></li>

Relative Pfade folgen den Konventionen der UNIX-Syntax und hängen von der Verzeichnisstruktur des Servers ab[cite: 5].

Im selben Verzeichnis

Liegt die Zieldatei im gleichen Ordner wie das aktuelle Dokument, wird direkt der Dateiname angegeben[cite: 5]: 

<!-- Aufruf aus index.html -->
<a href="about.html">Über uns</a>

In ein Unterverzeichnis

Befindet sich die Datei in einem Unterordner, wird der Ordnername vorangestellt[cite: 5]: 

<!-- Aufruf aus index.html -->
<a href="recipes/salmon.html">Garlic Salmon</a>
<a href="recipes/pasta/couscous.html">Couscous</a>

In ein übergeordnetes Verzeichnis (Ebene nach oben)

Mit ../ navigiert man im Verzeichnisbaum eine Ebene nach oben[cite: 5]: 

<!-- Aufruf aus recipes/salmon.html nach jenskitchen/index.html -->
<a href="../index.html">Zurück zur Startseite</a>
 
<!-- Aufruf aus recipes/pasta/couscous.html (zwei Ebenen nach oben) -->
<a href="../../index.html">Zurück zur Startseite</a>

Pfade relativ zum Seitenstamm (Root-Relative)

Beginnt ein Pfad mit einem Schrägstrich /, startet die Suche im Stammverzeichnis (Root) der Website[cite: 5]: 

<a href="/recipes/salmon.html">Garlic Salmon</a>

4. Innerhalb einer Seite verlinken (Document Fragments)

Um zu einer bestimmten Stelle innerhalb derselben Seite zu springen (z. B. Inhaltsverzeichnis zu Textabschnitten), werden Fragmente genutzt[cite: 5].

Schritt 1: Zielpunkt mit id definieren

Dem Ziel-Element wird ein eindeutiges id-Attribut zugewiesen[cite: 5]: 

<h2 id="startH">H</h2>

Schritt 2: Verlinkung mit Raute (#)

Im href-Attribut wird dem Namen der ID ein # vorangestellt[cite: 5]: 

<a href="#startH">Springe zu H</a>

5. Ansteuerung von Browser-Fenstern (target-Attribut)

Das target-Attribut steuert, wo das verlinkte Dokument geöffnet werden soll[cite: 5]:

Wert Verhalten
target=„_blank“ Öffnet den Link in einem neuen Browserfenster oder Tab[cite: 5].
target=„Name“ Öffnet den Link in einem Fenster/Tab oder IFRAME mit diesem spezifischen Namen[cite: 5]. Folgende Links mit demselben Zielnamen öffnen sich im selben Fenster[cite: 5]. 
<a href="recipes.html" target="_blank">Rezeptbuch in neuem Tab öffnen</a>

Über das mailto:-Protokoll lässt sich das Standard-E-Mail-Programm des Nutzers mit einer vorgegebenen Empfängeradresse öffnen[cite: 5]: 

<a href="mailto:wonderwoman@example.com">Email WonderWoman</a> (wonderwoman@example.com)

<note tip> Best Practice: Da E-Mail-Clients nicht auf allen Systemen korrekt für mailto:-Links konfiguriert sind, sollte die E-Mail-Adresse immer zusätzlich als Klartext auf der Seite stehen[cite: 5]. </note>