Bisher haben Links immer zu einer anderen Datei geführt. Aber du kannst mit einem Link auch zu einer bestimmten Stelle innerhalb derselben Seite springen - praktisch bei langen Seiten mit vielen Abschnitten.

Das id-Attribut: einer Stelle einen Namen geben

Damit ein Link zu einer bestimmten Stelle springen kann, braucht diese Stelle zuerst einen eindeutigen Namen. Dafür gibt es das id-Attribut, das du an fast jedes Element dranhängen kannst:

<h2 id="hobbys">Meine Hobbys</h2>

id="hobbys" gibt dieser Überschrift den eindeutigen Namen "hobbys". Eine id darf auf einer Seite jeweils nur einmal vorkommen - anders als bei einer Namensliste in einer Klasse, wo mehrere Kinder "Finn" heißen könnten, muss jede id auf deiner Seite einzigartig sein.

Dorthin verlinken

Um zu dieser Stelle zu springen, benutzt du im href ein Rautezeichen # gefolgt vom Namen der id:

<a href="#hobbys">Springe zu meinen Hobbys</a>

Wenn jemand auf diesen Link klickt, scrollt der Browser automatisch genau zu der Stelle, wo id="hobbys" steht - egal wie weit die Seite ist.

Ein Inhaltsverzeichnis für Finns Webseite bauen

Finns Startseite hat mittlerweile mehrere Abschnitte. Bauen wir ganz oben ein kleines Inhaltsverzeichnis. Zuerst geben wir den bestehenden Überschriften eindeutige IDs:

<h2 id="ueber-mich">Über mich</h2>
...
<h2 id="hobbys">Meine Hobbys</h2>
...
<h2 id="verein">Mein Verein</h2>

Und dann fügen wir das Inhaltsverzeichnis direkt unter der Hauptüberschrift ein:

<h1>Finns Fußball-Webseite</h1>

<h2>Inhaltsverzeichnis</h2>
<ul>
  <li><a href="#ueber-mich">Über mich</a></li>
  <li><a href="#hobbys">Meine Hobbys</a></li>
  <li><a href="#verein">Mein Verein</a></li>
</ul>

Speichere, lade die Seite neu und klicke auf die Links im Inhaltsverzeichnis - die Seite springt jetzt direkt zum jeweiligen Abschnitt.

Bonus: nach ganz oben springen

Es gibt eine spezielle, eingebaute ID, die es überall automatisch gibt, ohne dass du sie selbst vergeben musst: #top springt (in den meisten Browsern) automatisch an den Seitenanfang zurück. Am zuverlässigsten ist es aber, wenn du selbst ein Element mit id="top" ganz oben auf der Seite platzierst und von unten mit <a href="#top">Nach oben</a> dorthin zurückspringst.