Links & Pfade
Links verbinden Seiten, Abschnitte und Dateien. Ein falscher Pfad führt ins Leere, ein guter Link macht aus einzelnen Seiten eine nutzbare Website.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Relative und absolute Pfade
Ein relativer Pfad beginnt beim aktuellen Dokument.
./ bleibt im selben Ordner, ../ geht eine Ebene nach oben, / startet am Serverwurzelverzeichnis.
Eine absolute URL enthält Protokoll und Domain. Sie ist nötig für externe Ziele und kann für wichtige eigene Seiten sinnvoll sein.
<a href="kontakt.html">Kontakt</a>
<a href="../index.html">Zur Startseite</a>
<a href="/module/html">HTML-Modul</a>
<a href="https://developer.mozilla.org/">MDN öffnen</a>Sprungmarken und Anker
Ein Link mit #id springt zu dem Element, das diese id trägt.
Das ist praktisch für lange Seiten, Inhaltsverzeichnisse und Skip-Links.
Die id muss eindeutig sein. Setze den Anker auf den Zielbereich, nicht nur auf eine Überschrift, wenn der ganze Abschnitt gemeint ist.
<nav aria-label="Inhaltsverzeichnis">
<a href="#preise">Zu den Preisen</a>
</nav>
<section id="preise">
<h2>Preise</h2>
<p>Hier stehen die Tarife.</p>
</section>Gute Linktexte und neue Tabs
Der Linktext sollte das Ziel beschreiben.
"Hier klicken" sagt weder beim Überfliegen noch im Screenreader, wohin die Reise geht.
target="_blank" öffnet einen neuen Tab. Das kann überraschen, deshalb gehört ein Hinweis in den Linktext. rel="noopener" trennt die neue Seite vom ursprünglichen Fenster.
<a href="/preise">Preise und Tarife ansehen</a>
<a href="https://example.com/doku" target="_blank" rel="noopener">
Externe Dokumentation (öffnet neuen Tab)
</a>Vertiefung
Pfade sind relativ zum Dokument
Ein relativer Pfad wird immer vom aktuellen Dokument aus aufgelöst. Auf /module/html/links führt ../quiz zu /module/html/quiz, während /quiz an der Serverwurzel beginnt. Teste Pfade deshalb aus der echten Seitenstruktur.
Für Sprungmarken reicht eine eindeutige id. Der Browser scrollt zum Ziel und setzt den Fokus, wenn das Element fokussierbar ist. Aussagekräftige Linktexte helfen beim Überfliegen und im Screenreader.
<!-- von /module/html/links aus -->
<a href="../quiz">Zum HTML-Quiz</a>
<a href="/module/css">Zum CSS-Modul</a>
<a href="#details">Direkt zu den Details</a>
<section id="details">
<h2>Details</h2>
</section>Merksatz: Prüfe relative Pfade von der tatsächlichen Seite aus. Ein Link ist erst gut, wenn Ziel und Text auch ohne Kontext verständlich sind.
Übungsaufgabe
Website mit Navigation und Ankern
Baue eine kleine Seite mit Navigation, drei relativen Links und einem Inhaltsverzeichnis, das per Anker zu einem Abschnitt springt.
Das soll dein Programm können
- nav mit drei relativen Links
- Ein Link zu einer externen Seite mit target und rel
- Ein Anker mit href="#..." und passender id
- Aussagekräftige Linktexte statt "hier klicken"
- Ein Skip-Link zum Hauptinhalt
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Der Skip-Link zeigt auf die id des main-Bereichs. Für den externen Link brauchst du target="_blank" und rel="noopener".
Lösung anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Navigation und Anker</title>
</head>
<body>
<a href="#inhalt">Zum Inhalt springen</a>
<nav aria-label="Hauptnavigation">
<a href="/module/html">HTML-Modul</a>
<a href="../quiz">HTML-Quiz</a>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
MDN-Dokumentation (öffnet neuen Tab)
</a>
</nav>
<main id="inhalt">
<h1>Navigation und Anker</h1>
<a href="#details">Direkt zu den Details</a>
<section id="details">
<h2>Details</h2>
<p>Hier steht der ausführliche Inhalt.</p>
</section>
</main>
</body>
</html>Warum funktioniert das?
Relative Pfade werden vom aktuellen Dokument aufgelöst. Der Anker verbindet Link und Ziel über die id. Der Skip-Link ist das erste fokussierbare Element und spart Tastaturnutzern die Navigation.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.