Dokumentation
HTML

HTML Links und Navigation

Links, relative Pfade, Sprungmarken, Navigation und sichere externe Links.

HTML Links und Navigation

Links, relative Pfade, Sprungmarken, Navigation und sichere externe Links. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • Links mit a und href korrekt schreiben
  • relative, absolute und interne Links unterscheiden
  • Navigationen mit nav semantisch auszeichnen

Erklärung

Links verbinden Webseiten. Das href-Attribut enthält das Ziel. Relative Links zeigen innerhalb des eigenen Projekts auf Dateien oder Routen, absolute Links enthalten Protokoll und Domain.

Mit Sprungmarken kann man innerhalb einer Seite navigieren. Dafür verweist der Link auf eine ID. Externe Links in neuen Tabs benötigen zusätzliche Sicherheitsattribute.

Beispiele

<nav aria-label="Hauptnavigation">
  <a href="/">Start</a>
  <a href="/web-development/html/">HTML</a>
  <a href="/web-development/css/">CSS</a>
</nav>

Das nav-Element macht klar, dass diese Links eine Navigation bilden.

<a href="#formular">Zum Formular springen</a>
<section id="formular">
  <h2>Kontaktformular</h2>
</section>

Die ID ist das Sprungziel. Sie muss auf der Seite eindeutig sein.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externe Quelle</a>

rel="noopener noreferrer" schützt die ursprüngliche Seite bei neuen Tabs.

Typische Fehler

  • target="_blank" ohne rel verwenden.
  • Buttons als Links bauen, obwohl keine Navigation stattfindet.
  • Linktexte wie "hier klicken" schreiben, die ohne Kontext nichts erklären.

Best Practices

  • Schreibe Linktexte, die das Ziel benennen.
  • Nutze relative Links für eigene Projektseiten.
  • Setze aria-label, wenn mehrere Navigationen auf einer Seite vorkommen.

Kleine Übung

Baue eine kleine Dokumentationsnavigation mit Links zu drei Abschnitten auf derselben Seite und zwei Links zu anderen HTML-Dateien.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

Zuletzt aktualisiert: 7. Juni 2026

Grundstruktur

DOCTYPE, html, head, body, title, meta charset, viewport und lang-Attribut.

Listen

Ungeordnete, geordnete, verschachtelte und beschreibende Listen.