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:
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:
Then link to it with:
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:
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:
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
contactorfaq - avoid generating unstable IDs if people may bookmark the links
- place the
idon 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
idfor modern HTML anchor targets. - '
nameon 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
idon the actual heading or section is usually the cleanest approach. - Keep anchor IDs stable, readable, and unique within the page.

