HTML Fragment Links: Using id vs name Anchors

You will learn how URL fragments such as #foo locate content in HTML, why id is the standard modern choice, and when the older <a name="..."> pattern may appear in legacy pages.

A URL fragment is the part after # in a URL:

https://example.com/docs.html#installation

The browser uses installation to find a target within the loaded document and scroll it into view. In modern HTML, the normal target is an element whose id is installation:

<section id="installation">
  <h2>Installation</h2>
</section>

An id is a unique identifier for an element. It is useful beyond fragment links: CSS can select it, JavaScript can find it, and accessibility attributes can refer to it.

Historically, HTML also supported named anchors:

<a name="installation"></a>

Browsers retain support for this legacy pattern, so it can still work as a fragment target. However, new HTML should normally use id because it works on any element and expresses that the element itself is the identified destination.

Use id for new pages. Use a named anchor only when maintaining older markup that depends on it.

Think of a page as a building and a fragment such as #contact as a direction printed on a map.

• An id is a permanent room number attached directly to a room: id="contact".
• A legacy named anchor is like placing a small signpost inside the building: <a name="contact"></a>.

Both can help a visitor reach the area, but the room number is more broadly useful. Other systems—CSS, JavaScript, and accessibility relationships—can refer to it too.

Use id on the element that should be the destination.

<nav>
  <a href="#features">View features</a>
  <a href="#contact">Contact us</a>
</nav>

<main>
  <section id="features">
    <h2>Features</h2>
    <p>Details about the product.</p>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email us at hello@example.com.</p>
  </section>
</main>

When a user selects View features, the browser changes the URL fragment to #features and scrolls to the element with id="features".

The id value must be unique within the document. Do not give multiple elements the same id.

Legacy named-anchor syntax

If you must work with legacy markup, a named anchor requires an opening and closing tag:

<a name="features"></a>

Do not write this:

<!-- Incorrect for intended HTML anchor markup -->
<a name="features" />

HTML is not XML. A self-closing slash does not reliably close a normal HTML <a> element as intended. Use id instead, or write the full legacy form when necessary.

Consider this document:

<a href="#pricing">See pricing</a>

<section id="pricing">
  <h2>Pricing</h2>
  <p>Plans start at $10 per month.</p>
</section>

1. The link has href="#pricing".
2. The user clicks the link.
3. The browser keeps the current page but updates its URL fragment to #pricing.
4. It searches the document for the fragment target, which is the element with id="pricing".
5. The browser scrolls the <section> into view and may move keyboard focus in some navigation contexts.

The destination is the <section>, not only its heading. This is often useful because the target represents the complete pricing section.

• Documentation pages: Link users directly to headings such as #authentication or #configuration.
• Table of contents: Create links from a page outline to each article section.
• Error summaries in forms: Link from a message at the top of a form to the field or error area that needs attention.
• Marketing pages: Send visitors from an email or advertisement directly to #pricing, #demo, or #signup.
• Single-page interfaces: Use fragment identifiers for lightweight navigation or shareable locations, while ensuring the relevant element has an id.
• API references: Give each endpoint or option a stable id so readers can share a precise URL.

Developers commonly place stable id values on meaningful section containers or headings:

<section id="security">
  <h2>Security</h2>
  ...
</section>

A stable identifier matters because external links, bookmarks, documentation, and test tools may depend on it. Renaming id="security" to something else can break links such as /guide#security.

Common project patterns include:

• Generated heading IDs: Documentation tools often generate IDs from heading text, such as getting-started.
• Explicit IDs for stability: Teams manually set IDs when a public URL should remain stable even if the heading wording changes.
• Skip links: A link such as <a href="#main-content">Skip to main content</a> targets <main id="main-content"> to help keyboard users bypass repeated navigation.
• JavaScript lookup: Code may use document.getElementById("modal-title") to locate a specific element. This is another reason IDs must be unique.

Avoid using a fragment target solely as a JavaScript hook. If an ID is publicly linkable, treat it as part of the page's URL structure.

Using a self-closing <a> tag

This looks XML-like but is not the intended way to create an HTML anchor:

<!-- Avoid -->
<h1><a name="foo" />Foo Title</h1>

Use an id directly:

<h1 id="foo">Foo Title</h1>

Reusing the same ID

<!-- Incorrect: IDs must be unique in one document -->
<section id="details">...</section>
<section id="details">...</section>

Choose distinct values:

<section id="product-details">...</section>
<section id="shipping-details">...</section>

Putting # inside the id value

<!-- Incorrect for href="#pricing" -->
<h2 id="#pricing">Pricing</h2>

The # belongs in the URL or href, not in the ID:

<a href="#pricing">Pricing</a>
<h2 id="pricing">Pricing</h2>

Using name on non-anchor elements

The legacy fragment behavior is associated with <a name="...">, not arbitrary elements with a name attribute. For any normal element, use id.

Changing public IDs casually

If other pages link to #faq, changing it to #questions can create broken deep links. Keep public IDs stable or provide a compatibility strategy when reorganizing content.

id versus class

• Use id for one unique element and for fragment destinations.
• Use class for a reusable group of elements, such as many buttons or cards.

<section id="pricing" class="page-section">...</section>
<section id="features" class="page-section">...</section>

Both sections share the page-section class, but each has its own unique ID.

<!-- Link to a section on the same page -->
<a href="#contact">Contact</a>

<!-- The fragment target -->
<section id="contact">
  <h2>Contact</h2>
</section>

<!-- Link to a section on another page -->
<a href="/help.html#returns">Return policy</a>

• Put the fragment after # in a URL: #contact.
• Put the matching value in id without #: id="contact".
• Use id for all new fragment targets.
• An id must be unique in its document.
• Prefer meaningful, stable, lowercase, hyphen-separated values: account-settings.
• <a name="target"></a> is a legacy pattern that browsers may support.
• Do not use <a name="target" /> as a self-closing HTML anchor.

Should I use id or name for an HTML anchor?

Use id for new HTML. It is the standard modern way to create a target for a URL fragment such as #about.

Do fragment links work with any element that has an ID?

Yes. You can put an id on headings, sections, paragraphs, main, and other elements.

Does the # belong in the id attribute?

No. Write id="about" and link to it with href="#about".

Can two elements have the same ID in HTML?

No. IDs must be unique within a document. Duplicate IDs make fragment navigation, CSS, JavaScript, and accessibility references unreliable.

Is <a name="foo"></a> invalid?

It is a legacy technique that browsers commonly recognize for fragment navigation. For modern code, prefer id because it is clearer and more generally useful.

Why does <a name="foo" /> behave unexpectedly?

Normal HTML elements are not generally self-closed by />. The slash does not make an anchor safely self-closing in HTML markup. Use id or an explicit closing </a>.

Can I link to an ID on another page?

Yes. For example, /guide.html#installation loads guide.html and navigates to id="installation".

Can CSS change where a fragment link stops when a sticky header is present?

Yes. scroll-margin-top on the target can leave room for a fixed header:

section[id] {
  scroll-margin-top: 5rem;
}

• HTML id attribute — Unique element identifiers used by fragment links, CSS, JavaScript, and accessibility relationships.
• HTML links and the href attribute — Defines navigation targets, including same-page and cross-page fragments.
• URL fragments — The #target portion of a URL used to identify a location within a document.
• HTML class attribute — Used for reusable styling and grouping, unlike unique IDs.
• CSS selectors — IDs can be selected with #target, though classes are often better for reusable styles.
• JavaScript document.getElementById — Retrieves one element by its unique ID.
• Accessible skip links — A practical use of fragment links that helps keyboard users reach main content quickly.
• Semantic HTML sections and headings — Meaningful page structure makes fragment targets clearer and more maintainable.