So far, links have always led to a different file. But you can also use a link to jump to a specific spot within the same page - handy for long pages with many sections.

The id attribute: naming a spot

For a link to be able to jump to a specific spot, that spot first needs a unique name. That's what the id attribute is for, and you can attach it to almost any element:

<h2 id="hobbies">My Hobbies</h2>

id="hobbies" gives this heading the unique name "hobbies". An id may only appear once on a page - unlike a class name list where several kids might be called "Finn", every id on your page must be unique.

Linking to it

To jump to that spot, use a hash sign # followed by the id name in the href:

<a href="#hobbies">Jump to my hobbies</a>

When someone clicks this link, the browser automatically scrolls exactly to the spot where id="hobbies" is - no matter how long the page is.

Building a table of contents for Finn's website

Finn's home page now has several sections. Let's build a small table of contents at the top. First, we give the existing headings unique IDs:

<h2 id="about-me">About Me</h2>
...
<h2 id="hobbies">My Hobbies</h2>
...
<h2 id="club">My Club</h2>

And then we add the table of contents directly below the main heading:

<h1>Finn's Football Website</h1>

<h2>Table of Contents</h2>
<ul>
  <li><a href="#about-me">About Me</a></li>
  <li><a href="#hobbies">My Hobbies</a></li>
  <li><a href="#club">My Club</a></li>
</ul>

Save, reload the page, and click the links in the table of contents - the page now jumps straight to the matching section.

Bonus: jumping back to the top

There's a special, built-in ID that exists everywhere automatically, without you having to assign it yourself: #top automatically jumps (in most browsers) back to the top of the page. It's most reliable, though, if you place your own element with id="top" at the very top of the page and jump back there from further down with <a href="#top">Back to top</a>.