====== 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].

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

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]:

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

===== 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]:
<code html>
<!-- Aufruf aus index.html -->
<a href="about.html">Über uns</a>
</code>

==== In ein Unterverzeichnis ====
Befindet sich die Datei in einem Unterordner, wird der Ordnername vorangestellt[cite: 5]:
<code html>
<!-- Aufruf aus index.html -->
<a href="recipes/salmon.html">Garlic Salmon</a>
<a href="recipes/pasta/couscous.html">Couscous</a>
</code>

==== In ein übergeordnetes Verzeichnis (Ebene nach oben) ====
Mit ''../'' navigiert man im Verzeichnisbaum eine Ebene nach oben[cite: 5]:
<code html>
<!-- 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>
</code>

==== Pfade relativ zum Seitenstamm (Root-Relative) ====
Beginnt ein Pfad mit einem Schrägstrich ''/'', startet die Suche im Stammverzeichnis (Root) der Website[cite: 5]:

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

  * **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 ====
Dem Ziel-Element wird ein eindeutiges ''id''-Attribut zugewiesen[cite: 5]:
<code html>
<h2 id="startH">H</h2>
</code>

==== Schritt 2: Verlinkung mit Raute (#) ====
Im ''href''-Attribut wird dem Namen der ID ein ''#'' vorangestellt[cite: 5]:
<code html>
<a href="#startH">Springe zu H</a>
</code>

===== 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]. |

<code html>
<a href="recipes.html" target="_blank">Rezeptbuch in neuem Tab öffnen</a>
</code>

===== 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]:

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

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