HTML + CSS: Links und Navigation

Kurz: Links machen das Web zum Netz. Sie entstehen mit dem Element <a> (anchor) und dem Attribut href.

Teil des Kurses HTML + CSS

Kapitel 4 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Links machen das Web zum Netz. Sie entstehen mit dem Element <a> (anchor) und dem Attribut href.

<p><a href="https://example.org">Externer Link</a></p>
<p><a href="https://example.org" target="_blank" rel="noopener noreferrer">In neuem Tab öffnen</a></p>
<p><a href="#ziel">Springe zum Ziel auf dieser Seite</a></p>
<div style="height:120px">Platzhalter</div>
<h2 id="ziel">Hier ist das Ziel</h2>

Pfade

Art	Beispiel	Bedeutung
absolut	https://example.org/seite.html	vollständige Adresse (andere Webseite)
relativ zur Seite	kontakt.html	gleicher Ordner
in Unterordner	bilder/logo.png	Unterordner bilder
ein Ordner höher	../index.html	eine Ebene nach oben
ab Wurzel	/produkte/liste.html	vom Wurzelverzeichnis der Domain
Anker	#kapitel2	Stelle auf derselben Seite
Seite + Anker	faq.html#frage5	Stelle auf einer anderen Seite

Besondere Linkarten

<p><a href="mailto:info@example.org?subject=Hallo&body=Guten%20Tag">E-Mail schreiben</a></p>
<p><a href="tel:+491234567890">Anrufen</a></p>
<p><a href="beispiel.pdf" download>PDF herunterladen</a></p>
<p><a href="https://example.org" title="Ein Hinweistext erscheint beim Darüberfahren">Mit title</a></p>

• mailto: öffnet das Mailprogramm, tel: wählt auf dem Handy
• download lädt die Datei herunter statt sie anzuzeigen
• title zeigt einen Tooltip (kein Ersatz für gute Linktexte)

target und Sicherheit

target="_blank" öffnet einen neuen Tab. Moderne Browser setzen rel="noopener" dafür automatisch, trotzdem schreibt man es oft dazu. Bei Links zu fremden Seiten schützt rel="noopener noreferrer" vor Missbrauch des Fensters und gibt keine Herkunftsadresse weiter. Für bezahlte oder nicht vertrauenswürdige Links gibt es rel="nofollow sponsored ugc".

Gute Linktexte

Der Linktext sollte allein verständlich sein, denn Screenreader-Nutzer lassen sich oft alle Links der Seite vorlesen.

• Schlecht: “Klicke hier”, “Mehr”, “Link”
• Besser: “Preisliste 2025 als PDF herunterladen (2 MB)”
• Bei Links in neuen Tabs oder Downloads einen Hinweis geben (Dateityp, Größe)

Navigationsmenü

Ein Menü ist technisch eine Liste von Links in einem <nav>-Element:

<nav aria-label="Hauptmenü">
  <ul>
    <li><a href="/" aria-current="page">Start</a></li>
    <li><a href="/kurse">Kurse</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>
<style>
  nav ul { list-style: none; display: flex; gap: 8px; padding: 0; }
  nav a { padding: 6px 12px; text-decoration: none; background: #e0e7ff; border-radius: 6px; color: #1e3a8a; }
  nav a[aria-current="page"] { background: #1e3a8a; color: white; }
  nav a:hover, nav a:focus-visible { outline: 2px solid #1e3a8a; }
</style>

• aria-current="page" markiert den aktuellen Menüpunkt
• aria-label unterscheidet mehrere nav-Bereiche voneinander

Sprunglink für Tastaturnutzer

Als erstes Element der Seite hilft ein “Zum Inhalt springen”-Link, dass Tastaturnutzer nicht jedes Mal das ganze Menü durchtabben müssen:

<a class="skip" href="#inhalt">Zum Inhalt springen</a>
<nav><a href="#">Menüpunkt 1</a> <a href="#">Menüpunkt 2</a></nav>
<main id="inhalt" tabindex="-1"><h1>Hauptinhalt</h1></main>
<style>
  .skip { position: absolute; left: -999px; }
  .skip:focus { left: 8px; top: 8px; background: #000; color: #fff; padding: 8px; }
</style>

Klicke ins Ergebnis und drücke Tab: Der Link erscheint beim Fokus.

Merke

• <a href="..."> erzeugt Links; target="_blank" mit rel="noopener" für neue Tabs
• Pfade sind absolut, relativ oder Anker (#id); ../ geht eine Ebene hoch
• mailto:, tel: und download für besondere Aktionen
• Linktexte müssen allein verständlich sein
• Menüs sind Listen von Links in <nav>, mit aria-current für die aktuelle Seite

Übungsaufgabe

Baue ein Menü mit drei Links auf drei Seiten (index.html, ueber.html, kontakt.html) und markiere jeweils die aktuelle Seite.

Quiz zur Selbstkontrolle

Welches Attribut enthält das Linkziel?

• href (richtig)
• src
• link
• url

Was bedeutet ../bild.png?

• Datei bild.png einen Ordner höher (richtig)
• Datei im Unterordner
• Datei aus dem Internet
• Datei im selben Ordner

Was ist ein guter Linktext?

• Preisliste 2025 als PDF herunterladen (richtig)
• Klicke hier
• Mehr
• Link

Weiter im Kurs

Zurück: Überschriften, Absätze und Textformatierung

Weiter: Bilder und Grafiken

Alle Kapitel: HTML + CSS im Überblick