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]:
- HTML-Dokumente[cite: 5]
- Bilder[cite: 5]
- Videos / Filme[cite: 5]
- PDFs und weitere Dateitypen[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] |
Externe Links
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>
3. Navigation mit relativen Pfaden
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>
- Vorteil: Funktioniert von jedem beliebigen Dokument der Website aus identisch[cite: 5].
- Nachteil: Funktioniert in der Regel nicht bei lokaler Betrachtung auf dem eigenen Computer ohne lokalen Webserver, da
/sich sonst auf das Wurzelverzeichnis der Festplatte bezieht[cite: 5].
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
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>
6. E-Mail-Links (mailto)
Ü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>
