Sprungmarken und Navigation

Bisher haben Links auf andere Dateien gezeigt. Sie können aber auch innerhalb derselben Seite springen, und mehrere Links zusammen ergeben eine Navigation.

01 / 03Zu einer Stelle auf derselben Seite

Beginnt ein href mit einer Raute, ist kein Dateiname gemeint, sondern eine Stelle im aktuellen Dokument:

<p><a href="#zubereitung">Direkt zur Zubereitung</a></p>

<h2 id="zutaten">Zutaten</h2>
<p>Linsen, Suppengrün, Essig.</p>

<h2 id="zubereitung">Zubereitung</h2>
<p>Gemüse schneiden, alles köcheln lassen.</p>

Der Link zeigt auf #zubereitung, und weiter unten trägt eine Überschrift id="zubereitung". Der Browser scrollt dorthin. Die id ist dabei genau das, was du in der Attribut-Lektion gesehen hast: ein eindeutiger Name für ein Element. Und hier wird auch klar, warum sie eindeutig sein muss. Gäbe es sie zweimal, wäre nicht entscheidbar, wohin gesprungen werden soll.

Ein Name darf keine Leerzeichen enthalten, das ist die harte Regel. Der Rest ist Gewohnheit, hält dir aber Ärger vom Hals: klein schreiben, keine Umlaute, Wörter mit Bindestrich trennen. Also zubereitung-schritt-2 statt Zubereitung Schritt 2. Und Groß- und Kleinschreibung zählt: #Zubereitung findet id="zubereitung" nicht.

Ein Sonderfall zum Merken: href="#top" springt an den Seitenanfang, auch ohne dass es dort ein Element mit dieser id gibt. Das ist im Standard so festgelegt.

Der Anker funktioniert übrigens auch über Dateigrenzen hinweg. href="/rezepte/linsensuppe.html#zubereitung" öffnet die andere Seite und springt dort direkt zum Abschnitt. Genau das passiert, wenn dir jemand einen Link schickt, der mitten in einem langen Artikel landet.

02 / 03Mehrere Links sind eine Navigation

Sobald Links als Gruppe zur Orientierung dienen, gehören sie in ein nav:

<nav>
  <ul>
    <li><a href="/">Start</a></li>
    <li><a href="/rezepte">Rezepte</a></li>
    <li><a href="/technik">Technik</a></li>
    <li><a href="/ueber-mich">Über mich</a></li>
  </ul>
</nav>

Zwei Dinge stecken darin. Erstens nav: Das sagt Browsern und Screenreadern, dass hier die Navigation ist. Screenreader-Nutzer können gezielt zu diesem Bereich springen oder ihn überspringen, ohne sich durch alle Links zu hören.

Zweitens die Liste. Eine Navigation ist eine Aufzählung von Zielen, und die Reihenfolge ist meist Konvention, nicht Bedeutung. Also ul mit li. Das ist keine Förmlichkeit: Der Screenreader kündigt dann „Navigation, Liste mit vier Einträgen“ an, und der Nutzer weiß sofort, wie umfangreich das Menü ist.

Nicht jeder Haufen Links braucht ein nav. Gemeint sind die großen Blöcke: Hauptmenü, Fußzeilen-Menü, Brotkrumen-Pfad, Inhaltsverzeichnis. Drei Links mitten im Fließtext sind einfach Links.

Klick hier auf „Rezepte“, „Technik“ oder „Über mich“: Der Browser meldet, dass es die Seite nicht gibt. Das ist die richtige Antwort, denn /rezepte steht zwar im Markup, aber im Editor liegt keine solche Datei. „Start“ ist der Sonderfall: / ist die Startseite, und die gibt es hier, deshalb landest du wieder auf derselben Seite. In der Adresszeile siehst du bei allen vieren, wohin der Link gezeigt hätte, und darum geht es.

03 / 03Beides zusammen

Die Kombination aus beidem ist das Inhaltsverzeichnis einer langen Seite:

<nav>
  <ul>
    <li><a href="#zutaten">Zutaten</a></li>
    <li><a href="#zubereitung">Zubereitung</a></li>
  </ul>
</nav>

<h2 id="zutaten">Zutaten</h2>
<p>Linsen, Suppengrün, Essig.</p>

<h2 id="zubereitung">Zubereitung</h2>
<p>Gemüse schneiden, alles köcheln lassen.</p>

Eine Navigation aus Ankerlinks, darunter die Abschnitte mit passenden id-Werten. Probier es aus: In der Adresszeile siehst du den Anker mitwandern, genau wie in einem echten Browser. Springen siehst du hier nichts, dafür ist das Beispiel zu kurz. Alles steht ohnehin schon im Bild, und der Browser scrollt nur, wenn er muss.

Genau so ist auch das Inhaltsverzeichnis in den Artikeln auf dieser Seite gebaut. Es braucht keine Zeile JavaScript.