An anchor link jumps you to a specific spot on a webpage instead of loading a new page

An anchor link is a clickable piece of text or a button that takes you to a different section of the same webpage. When you click it, the page scrolls to that spot when ready — you stay on the same page, but your view moves. Anchor links are the reason a table of contents on a long article can jump you straight to the section you want, or why a "back to top" button appears on some pages.

The browser does not reload the page when you use an anchor link. Instead, the HTML and CSS are already there; the link just tells the browser where to look. This is different from a regular link, which loads an entirely new page. Anchor links make long pages easier to navigate and let readers skip to the information they actually need.

Key Takeaways

  • An anchor link scrolls you to a named section on the same page without loading a new page.
  • Anchor links use an ID attribute in HTML to mark where the link should jump to, and a hash symbol (#) in the URL to point to that ID.
  • A table of contents, "back to top" button, or navigation menu often uses anchor links to help readers move around long pages.
  • Anchor links work because HTML marks the destination with an ID, and the link references that ID by name.

How the HTML creates an anchor link

Creating an anchor link requires two pieces of HTML. First, you mark the destination — the spot where you want the page to jump to — by adding an ID attribute to an HTML element. An ID is a unique name you give to one element on the page. For example, if you want to mark a section heading as a jump destination, you might write <h2 id="pricing">Our Pricing Plans</h2>. The ID is "pricing", and it belongs only to that one heading.

Second, you create a link that points to that ID. A regular link points to a web address like www.example.com. An anchor link points to an ID on the same page by using a hash symbol followed by the ID name. So if you want a link that jumps to the "pricing" section, you write <a href="#pricing">Jump to Pricing</a>. When someone clicks that link, the browser finds the element with id="pricing" and scrolls to it.

The ID must match exactly. If you mark a section with id="pricing" but your link says href="#price", the browser will not find it and nothing will happen. IDs are case-sensitive, so "Pricing" and "pricing" are different.

Why websites use anchor links on long pages

A long article or documentation page can be hard to navigate if readers have to scroll through everything to find what they need. Anchor links solve this by letting you jump straight to the section you want. A table of contents at the top of the page can link to each section below, so a reader looking for "Troubleshooting" does not have to scroll past "Installation" and "Configuration" first.

Anchor links also improve the page's usability on mobile devices, where scrolling through a long page is slower and more tedious. A reader on a phone can tap a link and jump to the section they came for, rather than scrolling for several seconds.

From a technical standpoint, anchor links are also efficient. Because they do not load a new page, they are faster than regular links and do not require the server to send new data. The entire page is already loaded in the browser; the link just moves the view.

The URL changes when you use an anchor link

When you click an anchor link, the URL in your browser's address bar changes to include the hash and the ID name. If you are on www.example.com/guide and you click a link to the "pricing" section, the URL becomes www.example.com/guide#pricing. This happens automatically — you do not have to do anything.

This URL change is useful because it means you can bookmark or share the link to that specific section. If you send someone the URL www.example.com/guide#pricing, their browser will load the page and automatically scroll to the pricing section. Without the anchor link, you could only share the main page URL, and the other person would have to scroll to find the section themselves.

The hash symbol tells the browser that everything after it is an anchor, not a new page to load. The browser handles the jump locally, without asking the server for anything new.

Anchor links versus regular links

A regular link points to a different page or website. When you click it, the browser sends a request to the server, loads the new page, and displays it. The URL changes completely. An anchor link, by contrast, points to a location on the same page that is already loaded. The browser does not contact the server; it just scrolls to the marked spot and updates the URL to show where you are.

You can also combine the two. A link can point to a different page and then jump to a section on that page. For example, <a href="www.example.com/guide#pricing"> would load the guide page and then scroll to the pricing section. This is useful when you want to link to a specific part of another page.

Common places you see anchor links

Tables of contents use anchor links so readers can jump to the section they want. A page about "How to Fix Your Printer" might have a table of contents at the top with links to "Paper Jams", "Driver Issues", and "Wireless Connection Problems". Each link jumps to that section on the same page.

Navigation menus sometimes use anchor links, especially on single-page websites. Instead of separate pages for "About", "Services", and "Contact", a single-page site might have all those sections on one page, with a menu that uses anchor links to jump between them.

"Back to top" buttons use anchor links to jump to the top of the page. The button is usually a link with href="#top", pointing to an ID at the very beginning of the page.

FAQ pages often use anchor links so readers can jump directly to the question they are looking for, rather than scrolling through every question on the page.

Frequently Asked Questions

Can I link to an anchor on a different website?

Yes. You can link to a specific section on another website if that section has an ID. The link would look like <a href="www.example.com/page#section">. However, you can only link to sections that the other website's author has marked with an ID — you cannot create your own anchors on someone else's page.

What happens if I click an anchor link to a section that does not exist?

Nothing happens. The page does not scroll, and the URL changes to include the anchor name, but the browser cannot find the ID you linked to. The page stays where it is. This usually means the ID was misspelled or the section was removed.

Do anchor links work on mobile devices?

Yes. Anchor links work the same way on phones and tablets as they do on computers. The page scrolls to the marked section when you tap the link. On smaller screens, anchor links are especially useful because they save you from scrolling through a lot of content.

Can I style an anchor link differently with CSS?

Yes. An anchor link is still an HTML link element, so you can style it with CSS just like any other link. You can change the color, add hover effects, make it bold, or explore any other CSS property you would use on a regular link.