Ohne Links wäre jede Webseite eine Sackgasse. HTML Links verbinden Seiten miteinander und machen Navigation erst möglich! In diesem Tutorial lernst du alles über das <a>-Tag, das href-Attribut und wie du Links in neuen Tabs öffnest.
Einführung in das HTML Links Tutorial
Was sind HTML Links
Ein Link besteht aus drei Teilen:
<a>– das Tag (steht für "anchor")href="..."– das Ziel (wohin der Link führt)- Der Linktext – was der Nutzer sieht und anklickt
<a href="https://example.com">Hier klicken</a>So einfach ist das! Der Text wird blau und unterstrichen – der Browser erkennt automatisch: "Das ist ein Link."
Warum Links wichtig sind
Links machen deine Website navigierbar. Ohne sie müsste jeder Besucher URLs manuell eintippen (niemand macht das!). Außerdem:
- Google folgt Links, um deine Seite zu indexieren
- Interne Links verbessern dein SEO
- Externe Links zeigen, dass du auf gute Quellen verweist
Was du in diesem Tutorial lernst
Nach diesem Tutorial kannst du:
- Interne und externe Links erstellen
- Links in neuen Tabs öffnen (target-Attribut)
- E-Mail- und Telefon-Links anlegen
- Sichere, barrierefreie Links schreiben
Voraussetzungen
Benötigte HTML Grundkenntnisse
Du solltest HTML-Tags und Attribute verstehen. Falls nicht, hol das kurz nach!
Editor und Browser Setup
Jeder Texteditor und Browser reicht. Erstelle eine .html-Datei und klicke auf deine Links, um zu testen.
Schritt-für-Schritt-Anleitung
Dein erster HTML Link
Die Grundstruktur:
<a href="https://example.com">Klick hier</a>
Das href-Attribut (hypertext reference) definiert das Ziel. Der Text dazwischen wird anklickbar.
Das href-Attribut verstehen
Du kannst verschiedene Arten von Zielen angeben:
<!-- Externe Website (vollständige URL) -->
<a href="https://www.google.de">Google</a>
<!-- Interne Seite (relativer Pfad) -->
<a href="about.html">Über uns</a>
<!-- Andere Datei im Projekt -->
<a href="kontakt.html">Kontakt</a>
Tipp: Relative Pfade (ohne https://) funktionieren für Dateien in deinem Projekt. Praktisch, wenn du die Seite später auf einen anderen Server verschiebst!
Das target-Attribut nutzen
Willst du, dass der Link in einem neuen Tab öffnet? Dafür gibt's target="_blank":
<a href="https://example.com" target="_blank">Neuer Tab</a>
Nutzer bleiben auf deiner Seite, während der Link im Hintergrund öffnet. Perfekt für externe Links!
Link-Text richtig wählen
Vergleiche:
- ❌ "Klicke hier" – nichtssagend
- ❌ "Mehr lesen" – was genau?
- ✅ "Unser ausführliches HTML Tutorial" – beschreibt das Ziel
Gute Linktexte helfen Nutzern UND Suchmaschinen!
Code-Beispiele zu HTML
Vollständige Link-Beispiele
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Links</title>
</head>
<body>
<h1>Verschiedene Link-Arten</h1>
<p>Externer Link: <a href="https://www.google.de">Google</a></p>
<p>Interner Link: <a href="about.html">Über uns</a></p>
<p>Neuer Tab: <a href="https://example.com" target="_blank" rel="noopener">Extern (sicher)</a></p>
</body>
</html>
E-Mail und Telefon Links
Spezielle Protokolle öffnen Apps direkt:
<a href="mailto:info@example.com">E-Mail senden</a>
<a href="tel:+49123456789">Anrufen</a>
Klickt jemand auf den E-Mail-Link, öffnet sich sein Mail-Programm. Auf dem Handy startet tel: die Telefon-App!
Links sicher machen
Bei target="_blank" IMMER rel="noopener" hinzufügen:
<a href="https://external-site.com" target="_blank" rel="noopener">
Externe Website (sicher)
</a>
Das verhindert, dass die Zielseite auf deine Seite zugreifen kann. Sicherheit geht vor!
Häufige Fehler & Troubleshooting
Fehler 1: Anführungszeichen vergessen
FALSCH: <a href=https://example.com>Link</a>
RICHTIG: <a href="https://example.com">Link</a>Fehler 2: Schließendes Tag fehlt
FALSCH: <a href="...">Link
RICHTIG: <a href="...">Link</a>Ohne </a> wird der Rest der Seite zum Link!
Fehler 3: Falscher Pfad
Die Datei existiert nicht oder der Name ist falsch geschrieben? 404-Fehler! Prüfe:
- Existiert die Datei?
- Stimmt Groß-/Kleinschreibung?
- Stimmt der Ordnerpfad?
Fehler 4: Link öffnet nicht
Passiert oft bei mailto-Links ohne installiertes E-Mail-Programm. Das ist kein Codefehler – der Nutzer hat einfach kein Mail-Programm konfiguriert.
HTML: Best Practices & Tipps
Barrierefreie Links
Screenreader lesen Linktexte vor! Deshalb:
- Beschreibende Texte statt "hier klicken"
- Links sollten auch ohne Kontext verständlich sein
- Große genug für Touch-Bedienung (mindestens 44×44 Pixel Klickfläche)
Performance
target="_blank" öffnet neue Tabs – die verbrauchen Speicher. Nutze es nur für externe Links, nicht für jede Unterseite!
Sicherheits-Checkliste
- ☐ Externe Links mit
target="_blank"? →rel="noopener"hinzufügen - ☐ Linktexte beschreibend?
- ☐ Alle Links getestet?
Fazit zum HTML-Tutorial: Was hast du hier gelernt
Du kennst jetzt die Link-Grundlagen:
<a href="...">Text</a>– die Basistarget="_blank"– Link in neuem Tabrel="noopener"– Sicherheit bei externen Linksmailto:undtel:– für Kontaktlinks
Mit Links verbindest du deine Seiten zu einer echten Website – navigierbar und nutzerfreundlich!
Bereit für mehr? Lerne als Nächstes, wie du mit HTML Bilder deine Seiten visuell aufwertest!