Anchor links go in two places: the link itself and the target location

An anchor link is a clickable link that jumps to a specific spot on the same page or another page. To make one work, you need two pieces of code: an anchor tag with an href attribute that points to a destination, and an element at that destination with a matching id attribute. The link goes wherever you want people to click. The target goes at the heading or section you want them to land on.

The most common setup is a table of contents at the top of a long page, with links that jump down to each section. When someone clicks a link, the browser scrolls directly to that spot instead of making them scroll manually.

Key Takeaways

  • The clickable link uses an anchor tag with href="#sectionname", where sectionname matches an id on the target element.
  • The target location needs an id attribute on the heading or container you want to jump to, like <h2 id="sectionname">.
  • Both the link and the target must use the exact same name after the hash symbol, with no spaces or special characters.
  • Anchor links work within the same page, to different pages on your site, or even to specific sections on external websites.

How to write the clickable link

The link itself is a standard anchor tag with a special href value. Instead of pointing to a file or URL, it points to an id on the page by using a hash symbol followed by the id name.

Here is the basic structure:

<a href="#introduction">Jump to Introduction</a>

The text between the opening and closing tags is what appears as clickable text on the page. The href="#introduction" tells the browser to look for an element with id="introduction" somewhere on the page and scroll to it when clicked.

You can place this link anywhere: in a navigation menu, in a table of contents, in the middle of a paragraph, or in a sidebar. The location of the link does not matter — only that the id it points to exists somewhere on the page.

How to mark the target location

The destination needs an id attribute that matches the link's href value exactly. You add the id to the element you want the page to jump to — usually a heading, but it can be any HTML element.

Here is an example with a heading:

<h2 id="introduction">Introduction</h2>

When someone clicks the link <a href="#introduction">, the browser scrolls to this heading and places it near the top of the viewport. The id value must match exactly: if your link says #introduction but your heading says id="intro", the link will not work.

You can also add an id to a div, a section, or any other container element if you want to jump to a larger block of content rather than just a heading.

Naming rules for ids

The id name must follow specific rules or the link will fail silently. Start with a letter, use only lowercase letters, numbers, and hyphens, and avoid spaces or special characters. Good examples are id="section-one", id="faq-pricing", or id="contact-form". Bad examples are id="Section One" (space), id="section@one" (special character), or id="123section" (starts with a number).

Each id on a page must be unique — you cannot use the same id twice. If you need multiple similar sections, use different names like id="faq-1", id="faq-2", and id="faq-3".

Keep names short and descriptive so you remember what they refer to when you are building the page. A name like id="pricing-section" is clearer than id="ps" when you come back to edit the code later.

Anchor links to other pages

You can also link to a specific section on a different page. The syntax is the same, but you include the page filename before the hash.

<a href="about.html#team">Meet the Team</a>

This link points to the page about.html and jumps to the element with id="team" on that page. The target page must have an element with that id, or the link will load the page but not scroll to any specific location.

You can use this same method to link to sections on external websites, though you have no control over whether those sites have the id you are targeting. If the external site does not have that id, the link will load the page at the top instead.

Common mistakes and how to fix them

The most frequent error is a mismatch between the link and the target. If your link says href="#faq" but your heading says id="faqs" (with an extra s), the link will not work. Double-check that both use the exact same spelling and capitalization.

Another common mistake is forgetting the hash symbol in the href. Writing href="introduction" instead of href="#introduction" tells the browser to look for a file called introduction, not an id on the current page. Always include the hash.

Some people add an id to a link tag itself and then try to link to it, which does not work the way they expect. The id should be on the element you want to jump to, not on the link doing the jumping. If you want to jump to a heading, put the id on the heading.

Testing your anchor links

After you add an anchor link, test it by clicking it in your browser. The page should scroll smoothly to the target location. If nothing happens, open your browser's developer tools (usually F12 or right-click and select Inspect) and check the HTML to confirm the id on the target matches the href in the link exactly.

You can also test by typing the anchor directly into the address bar. If your page is example.com/page.html, type example.com/page.html#introduction into the address bar and press Enter. The browser should jump to the element with id="introduction". If it does not, the id either does not exist or is spelled differently than what you typed.

Frequently Asked Questions

Can I use the same id on multiple elements?

No. Each id must be unique on the page. If you need to style or target multiple similar elements, use a class instead of an id. An id should identify one specific element.

Do anchor links work on mobile devices?

Yes. Anchor links work the same way on phones and tablets as they do on desktop browsers. When someone clicks an anchor link on mobile, the page scrolls to the target location just as it would on a computer.

What happens if I link to an id that does not exist?

Nothing visible happens. The browser tries to find the id, fails silently, and the page stays where it is. The link appears to do nothing when clicked. This is why testing is important — broken anchor links give no error message.

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

Yes. Anchor links are regular anchor tags, so you can style them with CSS just like any other link. You can change the color, add hover effects, or apply any other styling you want.

Do search engines see anchor links?

Search engines recognize anchor links and can index the sections they point to. This helps with internal linking and can improve how your page appears in search results, especially for long pages with multiple sections.