Lädt...

HTML-Links

URL-Encoding hat erklärt, wie Sonderzeichen innerhalb einer Adresse reisen. Diese Sitzung baut das alltägliche HTML-Werkzeug, das diese Adressen nutzt: das Anker-Element a mit einem href. Links sind, wie Besucher zwischen Ihren Seiten und hinaus ins weitere Web wechseln. Klare Ziele und klarer klickbarer Text zählen genauso wie korrektes Markup.

Was ein Link ist

Ein Hyperlink ist ein Steuerelement, das bei Aktivierung irgendwohin navigiert. In HTML wickeln Sie den klickbaren Inhalt — meist Text, manchmal ein Bild — in <a>...</a> und setzen href auf das Ziel. Ohne href haben Sie keinen normalen Navigationslink. Der Browser stylt Links standardmäßig (oft unterstrichen und farbig), aber entscheidend sind Ziel und Formulierung.

Direkte Antwort

Schreiben Sie <a href="URL">clickable text</a>. href kann eine volle Webadresse wie https://www.example.com (absolut) oder ein Pfad zu einer anderen Datei auf Ihrer Site wie about.html (relativ) sein. Besucher klicken den Inhalt zwischen den Tags. Formulieren Sie lieber so, dass das Ziel beschrieben wird — „About this site“ — statt leerer Phrasen wie „click here“.

Absolute Links

Absolute URLs enthalten ein Schema (https:// oder http://) und meist einen Host. Nutzen Sie sie für externe Sites oder wann immer Sie wirklich eine volle Adresse brauchen, die nicht vom aktuellen Ordner abhängt.

Absoluter Link

html
HTML Code 
<p>
<a href="https://www.example.com">Visit Example</a>
</p>

Das absolute Beispiel lesen

  • href hält das volle Ziel, beginnend mit https://
  • Die Worte Visit Example sind, was der Nutzer sieht und aktiviert
  • Tippfehler im Host oder Schema brechen die Reise, selbst wenn die HTML-Tags gültig sind
  • Absolute Links profitieren weiterhin von ehrlichem, beschreibendem Text

Relative Links auf Ihrer eigenen Site

Relative URLs zeigen auf Dateien relativ zur Lage der aktuellen Seite. So verbinden Sie alltäglich index.html mit about.html, ohne Ihren Domainnamen zu wiederholen. Dateipfade-Kenntnisse gelten: falsche Ordner erzeugen stille 404-Fehler.

Relativer Link zu einer anderen Seite

html
HTML Code 
<p>
<a href="about.html">About this site</a>
</p>

Relative Gewohnheiten, die helfen

  • Halten Sie verwandte Seiten in einer klaren Ordnerstruktur
  • Bevorzugen Sie Dateinamen mit Bindestrichen ohne Leerzeichen
  • Testen Sie beide Richtungen: Start → about und about → Start
  • Denken Sie daran: Eine HTML-Datei verschieben, ohne relative Links zu aktualisieren, bricht die Navigation

Linktext ist Inhalt, keine Dekoration

Screenreader-Nutzer springen oft durch eine Linkliste, ohne den umgebenden Absatz zu hören. „Click here“ und „read more“ zehnmal wiederholt werden bedeutungslos. Benennen Sie das Ziel. Sie dürfen freundlich klingen — nur spezifisch bleiben.

Beschreibender Linktext

html
HTML Code 
<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>

<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>

Absolut vs. relativ — wählen Sie für die Aufgabe

  • Externe Site, die Sie nicht kontrollieren → absolut https://…
  • Eine andere Seite in Ihrem Projekt → relativer Pfad wenn möglich
  • Same-Site-Links als absolut geschrieben funktionieren noch, aber relative Links bleiben portabel, wenn Sie eine Domain umbenennen oder Dateien lokal öffnen
    Spätere Sitzungen behandeln Titel an Links, Lesezeichen (#) und E-Mail-Links; meistern Sie zuerst a + href.

Kaputte Links und 404er

Wenn href auf eine fehlende Datei oder einen falsch geschriebenen Host zeigt, navigiert der Browser zu einer Fehlerseite (oft HTTP 404). Das HTML um den Link herum kann trotzdem perfekt aussehen. Prüfen Sie Pfade immer so wie Favicon- und Stylesheet-Pfade: Schreibweise, Ordner und ob die Zieldatei gespeichert wurde.

Üben im Editor

  1. Erstellen Sie index.html und about.html im selben Ordner.
  2. Auf der Startseite einen relativen Link zu about.html mit beschreibendem Text.
  3. Auf der About-Seite einen relativen Link zurück zu index.html.
  4. Einen absoluten Link zu einer externen Site, der Sie vertrauen.
  5. Folgen Sie jedem Link im Browser; brechen Sie dann absichtlich einen relativen Pfad, beobachten Sie den Fehler und beheben Sie ihn.
  6. Schreiben Sie jeden „click here“-Text in einen Zielnamen um.

Typische Fehler

  • href vergessen, sodass der Text kein echter Hyperlink ist
  • Überall „click here“ oder „link“ als Zieltext
  • Kaputte relative Pfade nach dem Verschieben von Dateien zwischen Ordnern
  • Tippfehler in https:// oder der Domain bei externen URLs
  • Leerzeichen in Dateinamen und dann Rätselraten, warum relative Links scheitern
  • Interaktive Inhalte unachtsam verschachteln (Anfänger-Links einfach halten: Text in a)

Zusammenfassung

  • Links nutzen das a-Element mit einem href-Ziel
  • Absolute URLs enthalten ein Schema wie https://
  • Relative URLs zeigen auf andere Dateien Ihrer Site
  • Schreiben Sie klaren, beschreibenden Linktext für alle — einschließlich assistiver Technik
  • Kaputte Pfade scheitern zur Navigationszeit, selbst wenn Tags gültig aussehen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Html Tutorial