HTML
Web Development
Coding
Anchor Tags
Website Design

Should I make HTML Anchors with 'name' or 'id'?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

For modern HTML, use id, not name, to create anchor targets. Fragment links such as #section1 are intended to target element IDs, and using id also works naturally with CSS, JavaScript, and accessibility tooling.

Why id Is the Modern Choice

Historically, developers often wrote anchor points like this:

html
<a name="section1"></a>

That pattern came from older HTML usage, but it is no longer the preferred way to create in-page link targets. Today the common and recommended approach is:

html
<section id="section1">
  <h2>Section 1</h2>
</section>

Then link to it with:

html
<a href="#section1">Jump to Section 1</a>

This is simpler because any element can carry an id, not just an anchor element. You do not need an extra empty tag whose only purpose is to hold a name.

What Was name Used For?

The name attribute on anchors was historically used to mark destinations for fragment links. That made sense at a time when HTML documents were more limited and the distinction between link and target behavior was narrower.

In modern HTML, name still exists for other elements and other purposes, but for anchor targets it is effectively legacy practice. If you are writing new markup, id is the right tool.

id Has More Than One Use

Another reason id won is that it is useful beyond just linking. The same identifier can be used by:

  • fragment URLs such as #pricing
  • CSS selectors such as #pricing
  • JavaScript lookups such as document.getElementById("pricing")
  • accessibility relationships, depending on the markup pattern

That makes id a better general-purpose identifier than a dedicated anchor-only mechanism.

A Practical Example

Here is a common in-page navigation pattern:

html
1<nav>
2  <a href="#introduction">Introduction</a>
3  <a href="#pricing">Pricing</a>
4  <a href="#faq">FAQ</a>
5</nav>
6
7<section id="introduction">
8  <h2>Introduction</h2>
9</section>
10
11<section id="pricing">
12  <h2>Pricing</h2>
13</section>
14
15<section id="faq">
16  <h2>FAQ</h2>
17</section>

This is cleaner than scattering empty anchor tags through the document, and it keeps the link target attached to the actual content being referenced.

If You Maintain Old HTML

You may still encounter code that uses name on anchors in older projects. In maintenance work, you do not necessarily need to rewrite every old anchor immediately if it still functions in the target environment. But for new code and gradual modernization, prefer id.

If you are migrating an older page, a simple conversion often looks like this:

html
1<!-- older style -->
2<a name="contact"></a>
3<h2>Contact</h2>
4
5<!-- modern style -->
6<h2 id="contact">Contact</h2>

That keeps the fragment target on the heading itself, which is usually the most natural target for scrolling and bookmarking.

Good Practices for Anchor IDs

A few habits make anchor links more reliable:

  • keep IDs unique within the document
  • use readable values such as contact or faq
  • avoid generating unstable IDs if people may bookmark the links
  • place the id on the element users actually expect to land on

Stable, human-readable IDs are especially helpful in documentation pages, articles, and dashboards with side navigation.

Common Pitfalls

The most common mistake is adding name because of old tutorials or copied legacy snippets when id would be simpler and more correct for new HTML. Another is putting the id on an empty element above the real content, which can create awkward scroll positioning. Developers also forget that IDs must be unique, leading to fragment links that jump unpredictably when duplicates exist.

Summary

  • Use id for modern HTML anchor targets.
  • 'name on anchor elements is a legacy pattern, not the default for new code.'
  • Any element can be the fragment target as long as it has a unique id.
  • Putting the id on the actual heading or section is usually the cleanest approach.
  • Keep anchor IDs stable, readable, and unique within the page.

Course illustration
Course illustration

All Rights Reserved.