HTML-Links meistern: Schritt-für-Schritt Hyperlinks einfügen

Rand Zhang

·25. August 2025

·4 Min. Lesezeit

Titelbild: — Image Source: statics.mylandingpages.co

Einführung: Was lerne ich hier?

Du willst deiner Webseite endlich richtig funktionierende Links verpassen – egal ob zum Kontaktformular, zur Startseite, zu externen Seiten oder zu deinem Impressum? Perfekt. In diesem Tutorial lernst du Schritt für Schritt, wie du in HTML verschiedene Arten von Hyperlinks einfügst und absicherst. Du brauchst keine Vorkenntnisse, nur einen Texteditor (Visual Studio Code, Notepad++, Atom) und einen Browser – los geht’s!

Dauer: ca. 30–60 Minuten
Schwierigkeitsgrad: Einsteiger bis leicht Fortgeschrittene
Voraussetzungen: Basiswissen „Was ist HTML?“ vorteilhaft, aber nicht nötig.

Motivation: Viele Webseiten wirken ungepflegt, weil Links fehlen oder nicht funktionieren. Mit ein paar Tricks bist du anderen einen großen Schritt voraus und schaffst eine professionelle User Experience.

1. Grundlegendes zu HTML-Links

Das zentrale Element für Links ist das <a>-Tag (Anchor, engl. „Anker“).

Beispiel:

<a href="https://www.beispiel.de">Zu Beispiel.de</a>

Alles, was zwischen <a> und </a> steht, ist anklickbarer Linktext.

Hinweis: Es gibt externe Links (zu fremden Webseiten) und interne Links (zu Seiten deines eigenen Projekts). Mehr dazu gleich!

MDN Web Docs: HTML-Links

2. Schritt für Schritt: Die wichtigsten Link-Typen

2.1 Externer Link (zu einer anderen Webseite)

So geht’s:

<a href="https://www.wikipedia.org">Wikipedia besuchen</a>

Tipp: Externe Links öffnest du oft im neuen Tab – das geht mit target="_blank" PLUS rel="noopener noreferrer" für Sicherheit:

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN im neuen Tab</a>

Mehr zur Bedeutung von rel, siehe SELFHTML Wiki.

2.2 Interner Link (zu Unterseiten/Navigationspunkten)

So geht’s:

<a href="kontakt.html">Kontakt</a>

Dein Link verweist auf eine Datei in deinem Projektordner. Auch relative Pfade sind möglich:

<a href="/services/beratung.html">Beratungsseite</a>

Achte auf korrekte Pfade und Dateinamen!

2.3 Bild als Link

Ein Bild kann selbst anklickbar sein.

<a href="https://www.beispielseite.de">
  <img src="logo.png" alt="Logo der Beispielseite" />
</a>

Wichtig: Alt-Text im img-Tag für Barrierefreiheit nicht vergessen!

2.4 Anker/Sprungmarke (innerhalb der Seite)

Praktisch für Sprünge zu bestimmten Textabschnitten.

<h2 id="kontakt">Kontakt</h2>
<a href="#kontakt">Zum Kontakt springen</a>

Mehr zu Sprungmarken: Schulhomepage.de

2.5 E-Mail-Link

Für "Klick hier, um uns zu kontaktieren":

<a href="mailto:info@beispiel.de">E-Mail schreiben</a>

3. Relevante Attribute für Links – Best Practices 2025

Wenn du Links professionell einsetzen willst, achte auf folgende Attribute beim <a>-Tag:

Attribut	Bedeutung und Tipps
href	Zieladresse (Pflichtfeld!)
target	Öffnet Link z.B. im neuen Tab: `target="_blank"` plus `rel="noopener noreferrer"`
rel	Beziehung/Sicherheit/SEO, z.B. `noopener`, `nofollow`, `ugc`, `sponsored`
title	Kurze Info bei Hover (Tooltip), nicht als alleiniger Linktext!
download	Erzwingt Download des Ziels: `<a href="datei.pdf" download>PDF herunterladen</a>`
hreflang	Hinweise für Suchmaschinen auf Sprachwahl: `hreflang="de"`
tabindex/aria-label	Steuerung für Fokus und Screenreader; z.B. `aria-label="Zur Rechnung"`

Erklärung und Beispiele zu jedem Attribut findest du auf mediaevent.de und netzpluslogik.de.

Best Practice: Bei target="_blank" IMMER auch rel="noopener noreferrer" verwenden – sorge für Sicherheit und Datenschutz!
Siehe MDN: target und rel.

4. Kontrolle & Test: Funktioniert mein Link?

Viele Links funktionieren nicht, weil Tippfehler im Dateinamen, Pfad oder Attribut sind.

Checkliste zum Testen:

Im Browser öffnen und klicken (am besten in 2–3 Browsern)
Devtools benutzen (Rechtsklick → "Element untersuchen")
Online-Check: W3C Link Checker (direkt testen), Accessibility-Test: WAVE-Tool
Broken-Link-Checker: Zum Prüfen auf tote Links nutze z.B. sitechecker.pro
Auf korrekte Attribute und sinnvolle Linktexte achten

Praxis-Tipp: Kontrolliere auch Farbkontrast und Tastaturbedienung (Tabulator) – besonders wichtig für Barrierefreiheit.

5. Häufige Fehler und ihre Lösungen

Viele Einsteiger stolpern hier – keine Sorge, so geht’s besser!

Fehler	Lösung
Falscher Pfad/URL	URL auf Tippfehler prüfen, Broken-Link-Tool nutzen
`<a>` ohne `href`	Zieladresse ergänzen, sonst kein Link
Generischer Linktext („hier klicken“)	Immer beschreibende Texte nutzen („Mehr zu Barrierefreiheit“)
Alt-Text bei Bildlink vergessen	`alt="Logo der Webseite"` ergänzen
target ohne rel	IMMER `rel="noopener noreferrer"` ergänzen
HTML aus Word/Excel kopiert	Source im Editor bereinigen, reinen HTML-Code nutzen

Mehr dazu: elementor.com Guide (de)

6. FAQ – Die häufigsten Anfängerfragen

Q: Mein Link funktioniert nicht – woran liegt’s?
A: Prüfe, ob im <a>-Tag ein gültiges href steht und ob der Pfad stimmt. Klammer zu? Syntaxfehler?

Q: Wie öffnet sich mein Link im neuen Tab?
A: Mit target="_blank" plus rel="noopener noreferrer" (Schutz vor Tab-Napping!).

Q: Wie geht ein Anker-Link?
A: Zielbereich mit id="xyz" auszeichnen, dann <a href="#xyz">... nutzen.

Q: PDF zum Download statt als Webseite?
A: Mit Attribut download im Link.

Weitere FAQs und Fehlerbehebung: Siehe MDN FAQ.

7. Modernes Link-Design mit CSS

Links können viel mehr als nur blau und unterstrichen sein!

Basis-Styling:

a {
  color: #005fcc;
  text-decoration: underline;
}
a:hover, a:focus {
  color: #ff8800;
  outline: 2px solid #005fcc;
  transition: color 0.3s, outline 0.3s;
}

Barrierefreiheit:

a:focus {
  outline: 3px solid #0099ff;
  outline-offset: 2px;
}

Responsivität:

a {
  min-width: 44px;
  min-height: 44px;
  display: inline-block;
}

Probiere auch Animationen, dunkle Hintergründe (Dark Mode) und größere Klickflächen!

Guidelines & Beispiele: frontendmasters.com

8. Sandbox & Live-Tests: Links einfach ausprobieren

Du möchtest direkt herumprobieren? Nutze JSFiddle oder CodePen und kopiere die Codeschnipsel ein. HTML & CSS werden dort live angezeigt.

9. Accessibility und SEO: Best Practices

Linktexte klar und beschreibend formulieren
Alt-Text bei Bild-Links für Screenreader
Tabulatortauglichkeit mit sichtbarer Fokus-Markierung sicherstellen
rel-Attribute korrekt je nach Ziel und Zweck verwenden
Keywords und interne Links für SEO gezielt einbauen
Hinweise für internationale Zielgruppen: hreflang nutzen!

Mehr zu Accessibility: netzpluslogik.de

10. Weiterführende Links & Abschluss

Du willst tiefer ins Thema eintauchen? Hier sind die besten deutschen Ressourcen:

Fazit: Du hast es geschafft – von Null Ahnung zu professionell verlinkter Webseite! Jetzt kannst du eigene Links einfügen, sie sicher machen, kontrollieren und schick gestalten. Probiere weiter aus, experimentiere mit Farben, Features und prüfe immer die Benutzerfreundlichkeit.

Hast du noch Fragen? Teste Live-Beispiele auf JSFiddle oder CodePen und wirf einen Blick in die MDN FAQ.

Viel Erfolg beim Verlinken deiner Projekte!