<a> – Der Anker-Tag (Hyperlink)
Zweck: Verlinkt Seiten, Dokumente, E-Mail-Adressen oder Ankerpunkte.
<a href="https://www.example.com">Zur Website</a>Beispielausgabe:
🔹 Wichtige Attribute:
href– Zieladresse (URL oder Pfad)target="_blank"– öffnet Link in neuem Tabtitle– zeigt Tooltip beim Darüberfahren
📂 Interne Links
Zweck: Verlinken auf andere Seiten innerhalb deines Projekts.
<a href="textformatierung.html">Zur Textformatierung</a>Beispielausgabe:
Tipp: Verwende relative Pfade, wenn deine Dateien im selben Projektordner liegen.
📧 E-Mail-Link
Zweck: Öffnet das E-Mail-Programm des Benutzers mit voreingetragener Adresse.
<a href="mailto:info@beispiel.de">E-Mail schreiben</a>Beispielausgabe:
🏷️ Anker / Sprungmarken
Zweck: Ermöglichen das Springen zu bestimmten Abschnitten auf derselben Seite.
<a href="#kapitel2">Zu Kapitel 2 springen</a>
...
<h2 id="kapitel2">Kapitel 2</h2>Beispielausgabe:
Springe zu Beispielanker unten
Hierher wurde gesprungen!
🧭 Navigation mit <nav>
Zweck: Gruppiert Navigationslinks (z. B. Hauptmenü oder Footer-Menü).
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="textformatierung.html">Text</a></li>
<li><a href="bilder-medien.html">Bilder</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav>Beispielausgabe:
🔍 Externe vs. interne Links
| Art | Beispiel | Bemerkung |
|---|---|---|
| Extern | <a href="https://www.google.de"></a> |
Verlinkt zu einer anderen Website |
| Intern | <a href="index.html"></a> |
Bleibt innerhalb der eigenen Website |
| Relativ | <a href="../ordner/datei.html"></a> |
Bezieht sich auf Verzeichnisstruktur |
💡 Best Practices
- Verwende immer einen
title-Attribut, wenn es Sinn ergibt. - Vermeide „Hier klicken“ – schreibe stattdessen „Mehr über Formulare erfahren“.
- Nutze für Menüs immer semantische Struktur:
<nav>+<ul>+<li>. - Bei externen Links:
target="_blank"undrel="noopener noreferrer"für Sicherheit.