Should I make HTML Anchors with 'name' or 'id'?
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
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.
Related reading
- Show or hide element in React
- Sieve of Eratosthenes algorithm in JavaScript running endless for large number
- Simple Javascript encrypt, PHP decrypt with shared secret key
- Simplest code for array intersection in javascript
- Single thread concept of JavaScript running in browser
- Sinon async test array is not filled in before push happens
- Socket hang up using axios or request to get data from google geocoding api
- Sort array by firstname (alphabetically) in JavaScript
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.