HTML-Lesezeichen

Link Titles & Targets haben geändert, wie ein Link öffnet. Lesezeichen (Fragment-Links) ändern, wo auf einer Seite Sie landen. Lange Lektionen, FAQs und Dokumentation brauchen oft einen Sprung zu „Preise“, „FAQ“ oder „Zurück nach oben“, ohne ein ganz neues Dokument zu laden. Dieses Muster verbindet eine eindeutige id am Ziel mit einem href, der mit # beginnt.

Was ein Seiten-Lesezeichen ist

Ein Fragment-Bezeichner ist der Teil einer URL nach #. In HTML erzeugen Sie den Landeplatz, indem Sie einem Element eine id geben. Jeder Link, dessen href #that-id ist, fordert den Browser auf, zur ersten passenden id auf der Seite zu scrollen (oder auf der Seite, die vor dem # genannt wird, wenn Sie einen Pfad angeben).

Direkte Antwort

1. Geben Sie dem Ziel eine id, zum Beispiel <h2 id="pricing">.
2. Verlinken Sie mit href="#pricing".
   Das # bedeutet „finde diese id.“ Ids müssen auf der Seite eindeutig sein. Bevorzugen Sie kurze Namen ohne Leerzeichen: pricing, nicht Our Pricing!!.

Inhaltsverzeichnis auf der Seite

Eine kleine Navigation oben auf einer langen Seite ist die klassische Anfänger-Demo: Fragment-Links oben, passende ids an Überschriften darunter, plus ein Rücksprung-Link.

Das Beispiel auf der Seite lesen

• #intro und #pricing sind Fragment-Links, keine eigenen Dateien
• Die id jeder Überschrift muss dem Fragment nach # entsprechen
• Die Navigation kann überall stehen; Inhaltsverzeichnisse oben sind bei langem Inhalt üblich
• „Zurück zur Einleitung“ zeigt, dass Lesezeichen auf demselben Dokument nach unten und nach oben wirken

Zu einem Abschnitt auf einer anderen Seite verlinken

Sie können einen relativen (oder absoluten) Pfad mit einem Fragment kombinieren. Der Browser lädt die Seite und springt dann zur id, falls sie existiert.

Wann path#id verwenden

• Sprünge auf derselben Seite: #pricing reicht
• Eine andere HTML-Datei in Ihrem Projekt: guide.html#pricing
• Externe Docs, denen Sie vertrauen: eine vollständige URL mit #section-name am Ende, wenn die Seite stabile ids bereitstellt
  Fehlt die id auf der Zielseite, öffnet der Browser die Seite meist oben und ignoriert das unbekannte Fragment.

Gewohnheiten bei Id-Namen

• Ein Id-Wert pro Seite — niemals doppelt
• Beginnen Sie möglichst mit einem Buchstaben; vermeiden Sie Leerzeichen und seltsame Satzzeichen
• Verwenden Sie Bindestriche für Mehrwortnamen: getting-started
• Halten Sie Namen stabil, wenn andere Seiten tief darauf verlinken
  Ids sind für Maschinen und URLs; sichtbarer Überschriftentext darf menschenfreundlich und vom Id-String verschieden bleiben.

Lesezeichen vs. Browser-„Lesezeichen“

Menschen sagen auch „Lesezeichen“ für das Speichern einer Seite in den Favoriten des Browsers. Diese Lektion meint Fragment-Links innerhalb der Seite. Browser-Favoriten nutzen die Dokument-URL (manchmal mit Fragment, wenn Sie eines kopiert haben). Dasselbe Wort, unterschiedliche Alltagsaufgaben — halten Sie die HTML-Bedeutung klar, wenn Sie andere unterrichten.

Hinweise zu Barrierefreiheit und UX

Sprunglinks helfen Tastatur- und Screenreader-Nutzern, lange Seiten zu durchqueren, wenn Ziele echte Landmarken sind (Überschriften, Abschnitte). Spammen Sie nicht Dutzende leerer ids. Stellen Sie sicher, dass das Ziel nach dem Sprung sichtbar ist — sticky Header können Überschriften später verdecken, wenn Sie CSS lernen; prüfen Sie vorerst, dass der richtige Abschnitt erscheint.

Übung in Ihrem Editor

1. Erstellen Sie zwei Überschriften mit unterschiedlichen id-Werten.
2. Darüber Fragment-Links mit href="#…" hinzufügen.
3. Jeden Link anklicken und bestätigen, dass die Seite zur passenden Überschrift springt.
4. Einen „Zurück nach oben“-Link zu einer id an der ersten Überschrift oder einer oberen Landmarke hinzufügen.
5. Aus einer zweiten Datei mit other.html#intro verlinken und den seitenübergreifenden Sprung prüfen.
6. Kurzzeitig eine id duplizieren, die Verwirrung beobachten, dann die Eindeutigkeit reparieren.

Typische Fehler

• Dieselbe id zweimal auf einer Seite verwenden
• Das # im href vergessen, sodass der Browser nach einem Dateinamen sucht
• Leerzeichen oder seltsame Zeichen in ids setzen
• Auf eine id verlinken, die nicht existiert
• Fragment-Lesezeichen mit target="_blank" verwechseln (andere Aufgaben)
• Erwarten, dass #pricing allein ohne Pfad eine andere Datei öffnet

Zusammenfassung

• Lesezeichen auf derselben Seite nutzen id plus href="#id"
• Ids müssen eindeutig, kurz und ohne Leerzeichen sein
• Ideal für lange Seiten und kleine Inhaltsverzeichnisse
• Mit page.html#id in einen Abschnitt auf einer anderen Seite springen
• Fehlende Fragmente scheitern meist still, indem man oben bleibt