An anchor link jumps you to a specific spot on the same page or another page, instead of loading the top

An anchor link is a hyperlink that points to a particular section within a webpage rather than to the top of the page. When you click it, the browser scrolls directly to that section. You've used them without thinking about it — when you click a "Jump to FAQ" link and the page scrolls down to the questions, that's an anchor link at work.

Anchor links are built from two pieces: a link that points somewhere, and a target that marks where to go. The target uses an id attribute — a unique label you assign to an HTML element. The link then references that id. The browser reads the reference and scrolls to match.

They're useful because they save readers from scrolling through long pages, they let you link directly to a subsection from outside the page, and they make navigation faster on mobile where scrolling takes time. A table of contents that jumps to each section is the most common example.

Key Takeaways

  • An anchor link has two parts: an id attribute on the target element and an href that references that id with a hash symbol.
  • The id must be unique on the page — no two elements can have the same id.
  • Anchor links work across pages too: you can link from one page to a specific section on another page.
  • Screen readers and keyboard users rely on well-structured anchor links, so proper labeling matters for accessibility.

How to create an anchor link on your own page

Start by adding an id to the element you want to link to. This is usually a heading, but it can be any HTML element. For example, if you have a section about pricing, you might write:

<h2 id="pricing">Our Pricing Plans</h2>

The id is "pricing". Now create a link that points to it using a hash symbol followed by the id name:

<a href="#pricing">Jump to Pricing</a>

When someone clicks that link, the browser scrolls the page so the h2 with id="pricing" appears at the top of the viewport. The id stays the same whether the link is on the same page or a different one.

Keep id names short, lowercase, and descriptive. Use hyphens instead of spaces: "pricing-plans" instead of "pricing plans". Avoid numbers at the start and special characters. The id is case-sensitive, so "Pricing" and "pricing" are different targets.

Linking to a section on a different page

You can point to an anchor on another page by adding the page name before the hash. If you're on your home page and want to link to the pricing section on your services page, write:

<a href="services.html#pricing">View Our Pricing</a>

The browser loads services.html and then scrolls to the element with id="pricing". This works the same way whether the pages are on your own site or someone else's site, as long as the target page exists and the id is correct.

If the id doesn't exist on the target page, the link still works — the page just loads at the top instead of scrolling. The browser doesn't show an error, so test your cross-page anchor links to make sure they point to real ids.

Why id attributes must be unique

Each id on a page must be different. If two elements have id="pricing", the browser won't know which one to scroll to, and the behavior becomes unpredictable. Some browsers scroll to the first match, others to the last. This breaks the link's purpose.

Use classes instead if you need to label multiple similar elements. A class can appear on many elements; an id cannot. If you're styling multiple boxes the same way, use class="box". If you're marking one specific section to link to, use id="box-one".

Validation tools like the W3C Markup Validator will flag duplicate ids as errors. Running your HTML through a validator catches these mistakes before users encounter broken links.

Anchor links and accessibility

Screen reader users and keyboard-only users depend on anchor links to navigate long pages. A well-labeled table of contents with anchor links lets them jump between sections without scrolling through everything in between.

Make sure your id names describe what the section is about. An id like "section1" tells a screen reader nothing; an id like "contact-form" tells them exactly what they're jumping to. The link text itself should also be clear — "Jump to contact form" is better than "Click here".

Anchor links also help with focus management. When a keyboard user activates an anchor link, the browser moves focus to the target element. If the target is a heading, focus lands on the heading. If it's a div, focus lands on the div. This helps keyboard users understand where they are on the page.

Common mistakes with anchor links

The most frequent error is forgetting the hash symbol in the href. Writing href="pricing" instead of href="#pricing" tells the browser to look for a page called pricing, not an id. The link will fail silently — it won't load the page or scroll.

Another mistake is using spaces or special characters in id names. An id like "pricing plans" or "pricing-&-features" causes problems in some browsers. Stick to letters, numbers, and hyphens, and always start with a letter.

Changing an id after you've created links to it breaks those links. If you rename id="faq" to id="questions", any link pointing to #faq stops working. Keep a list of your ids or use a search tool to find all references before you change one.

Frequently Asked Questions

Can I style an anchor link differently from a regular link?

Yes. Use CSS to target the :visited pseudo-class or add a class to the anchor link itself. You can change the color, underline, or background when someone hovers over it, just like any other link. The anchor functionality doesn't change based on styling.

What happens if I link to an id that doesn't exist?

The page loads normally at the top, and no error appears. The browser silently ignores the missing id. This is why testing anchor links is important — a broken anchor link looks like a working link that just doesn't scroll.

Do anchor links work in single-page applications?

It depends on how the application is built. Traditional anchor links work in static HTML. Modern JavaScript frameworks like React or Vue may interfere with the default behavior, so developers have to handle anchor navigation manually. Check your framework's documentation if anchor links aren't working as expected.

Can I use numbers or special characters in an id?

You can use numbers, but not at the start. An id must begin with a letter. Avoid special characters except hyphens and underscores. Stick to lowercase letters, numbers, hyphens, and underscores for the widest compatibility.

How do I link to an anchor from outside my website?

Use the full URL followed by the hash and id. For example: <a href="https://example.com/services.html#pricing">. This works as long as the target website hasn't blocked external anchor links, which is rare.