How to Create an Anchor Link in HTML

What you’ll build or solve

You’ll create anchor links that jump to a specific section on the same page.

When this approach works best

Anchor links work best when you:

• Build long pages with multiple sections.
• Add a table of contents at the top of an article.
• Include “Back to top” links.
• Improve navigation in FAQs or documentation.

This approach is not meant for navigating between different HTML pages. Use normal links for that.

Prerequisites

• A code editor
• A browser
• Basic understanding of HTML elements and attributes

No additional setup is required.

Step-by-step instructions

Step 1: Add an id to the target element

Anchor links work by jumping to an element that has a specific id.

Add an id attribute to the element you want to scroll to:

<h2id="contact">Contact</h2>
<p>Get in touch with us.</p>

Rules for id values:

• Must be unique on the page.
• Must not contain spaces.
• Are case-sensitive.

What to look for:

If the link does not scroll correctly, confirm the id value matches exactly, including capitalization.

Step 2: Create a link using #id

Create a link that points to the id using a hash (#) symbol.

<ahref="#contact">Go to Contact</a>

• #contact refers to the element with id="contact".
• The browser scrolls automatically to that element when clicked.

That is the complete mechanism behind anchor links.

What to look for:

• The # symbol is required in the href.
• The id must exist on the page.
• Multiple anchor links can create a table of contents.
• Linking to id="top" creates “Back to top” behavior.
• Use anchor links for long pages like documentation or FAQs.

Examples you can copy

Example 1: FAQ navigation

<h2>FAQ</h2>
<ul>
<li><ahref="#q1">What is your refund policy?</a></li>
<li><ahref="#q2">Do you offer support?</a></li>
</ul>

<h3id="q1">What is your refund policy?</h3>
<p>We offer a 30-day refund.</p>

<h3id="q2">Do you offer support?</h3>
<p>Yes, email and chat support are available.</p>

Each link scrolls to its matching question.

Example 2: Simple table of contents

<nav>
<ahref="#about">About</a>
<ahref="#services">Services</a>
<ahref="#contact">Contact</a>
</nav>

<sectionid="about">
<h2>About</h2>
</section>

<sectionid="services">
<h2>Services</h2>
</section>

<sectionid="contact">
<h2>Contact</h2>
</section>

All links use the same #id pattern shown in the steps.

Example 3: Back to top link

<headerid="top">
<h1>My Website</h1>
</header>

<p>Lots of content here...</p>

<ahref="#top">Back to top</a>

The link scrolls back to the header.

Common mistakes and how to fix them

Mistake 1: Forgetting the # symbol

What you might do

<ahref="contact">Go to Contact</a>

Why it breaks

Without #, the browser looks for another page instead of a section on the same page.

Fix

<ahref="#contact">Go to Contact</a>

Mistake 2: id case mismatch

What you might do

<h2id="Contact">Contact</h2>
<ahref="#contact">Go to Contact</a>

Why it breaks

Contact and contact are different values. IDs are case-sensitive.

Fix

<h2id="contact">Contact</h2>
<ahref="#contact">Go to Contact</a>

Mistake 3: Using spaces in the id

What you might do

<h2id="our services">Services</h2>

Why it breaks

Spaces are not valid for anchor IDs.

Fix

<h2id="our-services">Services</h2>

Troubleshooting

If clicking reloads the page, confirm the href starts with #.

If nothing happens, confirm the id exists.

If the wrong section scrolls into view, check for duplicate IDs.

If scrolling feels slightly off, check for a fixed header overlapping the section.

Quick recap

• Add a unique id to the target element.
• Create a link with <a href="#id">.
• The # symbol is required.
• IDs are case-sensitive and cannot contain spaces.
• Anchor links improve navigation on long pages.