Anchor links go in the HTML source code, not in your browser

An anchor link is a piece of HTML code that lets you jump to a specific spot on a webpage instead of landing at the top. You add it in two places in your HTML file: first, you mark the destination with an id attribute, then you create a link that points to that id. Both pieces live in your HTML source code — the file you edit in a text editor or code editor, not something you can add through your browser's interface.

The browser displays the result of your anchor link (the jump happens when someone clicks), but the anchor link itself is invisible code. You write it once, save it, and then anyone viewing that webpage can use it.

Key Takeaways

  • Anchor links require two HTML elements: an id attribute on the destination element, and an anchor tag with href="#idname" pointing to it.
  • The id attribute can go on any HTML element — a heading, paragraph, section, or div — wherever you want the link to land.
  • The anchor tag with the link itself usually lives in a navigation menu, table of contents, or anywhere else you want readers to click.
  • You write anchor links in your HTML file using a text editor or code editor, then save and upload the file to your web server.

The two parts of an anchor link: destination and link

Every anchor link has two pieces. First, you mark where you want the link to land by adding an id attribute to an HTML element. For example, if you want readers to jump to a section called "Pricing", you might write:

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

The id is "pricing" — you choose that name. It must be unique on the page (no two elements can have the same id), and it cannot have spaces.

Second, you create a link that points to that id. You use a regular anchor tag, but instead of linking to another page, you link to the id with a hash symbol:

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

When someone clicks that link, the browser scrolls the page so the element with id="pricing" appears at the top of the window. The hash symbol tells the browser "look for an id on this same page, not a different file."

Where to put the destination id in your HTML

The id attribute can go on almost any HTML element — a heading, a paragraph, a section, a div, a list item. Choose the element that marks the actual spot you want readers to land on. If you want them to jump to a section about pricing, put the id on the heading that says "Pricing", not on a random paragraph above it.

Here are common places to add ids:

  • <h2 id="section-name"> — on section headings, so readers jump to the start of a section.
  • <div id="contact-form"> — on a container that holds a form or other content block.
  • <section id="testimonials"> — on a semantic section element.
  • <p id="important-note"> — on a specific paragraph if you want to link directly to it.

The id name should be descriptive and lowercase, with hyphens instead of spaces: "pricing-table", "contact-us", "faq-section". Avoid generic names like "section1" or "content" because they do not tell you what the link points to when you read the code later.

Where to put the anchor link itself

The anchor tag with the link can go anywhere you want readers to be able to click. The most common places are:

  • Navigation menus — at the top of the page, so readers can jump to different sections.
  • Table of contents — a list of links near the top that lets readers jump to any section.
  • Inline text — within a paragraph, so readers can click a phrase to jump to related content.
  • Footer links — at the bottom, so readers can jump back to the top or to other sections.

For example, a table of contents might look like this:

<ul> <li><a href="#pricing">Pricing</a></li> <li><a href="#features">Features</a></li> <li><a href="#faq">FAQ</a></li> </ul>

Each link points to an id somewhere else on the page. When a reader clicks "Pricing", the browser jumps to the element with id="pricing".

How to write anchor links in your code editor

You add anchor links the same way you write any other HTML — in a text editor or code editor. Open your HTML file, find the element where you want the destination to be, and add the id attribute. Then find where you want the link to appear, and add the anchor tag with the href pointing to that id.

Save the file, then upload it to your web server or view it locally in your browser to test. Click the link and watch the page jump to the destination. If it does not work, check that the id name in the href matches the id name on the destination element exactly — they are case-sensitive, so "Pricing" and "pricing" are different.

You can test anchor links on your own computer before uploading. Create an HTML file with both the id and the link, open it in your browser, and click the link. The jump should happen when ready.

Common mistakes when adding anchor links

The most frequent error is a mismatch between the id name and the href. If you write id="pricing-section" but link to href="#pricing", the link will not work because the names do not match. Copy and paste the id name into the href to avoid typos.

Another mistake is forgetting the hash symbol in the href. href="pricing" tells the browser to look for a file called "pricing", not an id on the current page. Always use href="#pricing" with the hash.

Some people also add ids to elements that are not visible or are too far down the page. If you add an id to a hidden element or one that is below the fold, the link will still work, but the destination may not be obvious to the reader. Put ids on elements that mark a clear, visible starting point.

Frequently Asked Questions

Can I use the same id on multiple elements?

No. Each id must be unique on the page. If two elements have the same id, the browser will jump to the first one it finds, and your code will not validate. Use a different id for each destination, or use a class attribute if you need to mark multiple elements with the same name.

Do anchor links work on mobile phones?

Yes. Anchor links work the same way on mobile as on desktop — the page scrolls to the destination when you tap the link. The experience is identical.

Can I link to an anchor on a different page?

Yes. Use href="page-name.html#anchor-id" to link to an anchor on another page. The browser will load that page and jump to the id. Make sure the id exists on the destination page, or the link will land at the top.

What if I want the page to jump to the top when someone clicks a link?

Use <a href="#top"> and add id="top" to the very first element on your page, usually the header or body tag. Some developers use href="#" to jump to the top, though this is less explicit.

Do search engines see anchor links?

Yes. Search engines read the HTML and understand anchor links. They can index the ids on your page, which may help with search results and accessibility. Using descriptive id names is good for both users and search engines.