Duplicate IDs in HTML – What They Break and How to Fix Them

Duplicate IDs in HTML are an invisible issue. You won’t find them unless you’re actively looking. The page loads and everything looks fine. However, underneath, things quietly break across JavaScript, CSS, and accessibility.

If a JavaScript function targets the wrong element or a CSS rule applies to only one of two identical components, duplicate IDs could be the cause. They can also lead to issues like screen readers announcing the wrong label.

In this article, we cover what duplicate IDs in HTML are, what causes them, and how they break your site. We also walk you through how to find and fix them.

What is a duplicate ID in HTML?

An ID is a unique name given to an HTML element. It helps the browser, JavaScript, and assistive tools find and use that exact element when they need to interact with it or identify it on the page. Think of it as a name tag on a person in a crowd.

You add it using the id attribute:

<button id="submit-btn">Subscribe</button>

A duplicate ID is when two or more elements share the same id value on a single page.

<button id="submit-btn">Subscribe</button>
<button id="submit-btn">Contact Us</button>

The HTML specification requires every ID to be unique within a document. But the browser does not enforce this rule. It simply renders the page as normal, without any warning or indication that anything is wrong. That is what makes duplicate IDs so easy to miss and hard to debug.

What causes duplicate IDs in HTML?

Duplicate IDs in HTML usually creep in through copy-pasting elements, reusing components, CMS-generated content, or third-party scripts that introduce IDs you have no control over.

Copy-pasting elements is the most frequent cause of duplicate IDs. When you copy an element that has an ID and paste it elsewhere on the same page, both copies end up with the same ID.

Reusable components are another common source. A card, modal, or form component that works fine in isolation can introduce duplicate IDs in HTML the moment it appears more than once on the same page.

CMS-generated content can repeat IDs when the same template or widget is used multiple times on a page, with no mechanism to ensure each instance gets a unique ID.

Third-party scripts and widgets are easy to overlook because you do not control the code. An embedded chat widget, analytics snippet, or social media button can quietly introduce duplicate IDs that clash with your own.

How duplicate IDs break JavaScript

getElementById() is a JavaScript method that finds and returns an HTML element based on its id attribute. You use it when you want your JavaScript code to interact with a specific element on the page: reading its value, changing its content, attaching a click handler, and so on.

For example, if you have this button in your HTML:

<button id="submit-btn">Subscribe</button>

You can grab it in JavaScript like this:

const btn = document.getElementById("submit-btn");

The document part refers to the entire page. You are essentially telling the browser, “search this whole document and find the element with this ID.” Because IDs are supposed to be unique, the method is designed to return exactly one element.

That is why duplicate IDs break it.

When two elements share the same ID, getElementById() returns only the first match, and the second becomes completely unreachable. So if you have:

<button id="submit-btn">Subscribe</button> 
<button id="submit-btn">Contact Us</button>

document.getElementById("submit-btn").addEventListener("click", handleContact);

That event listener only attaches to the first button. The “Contact Us” button never responds, no error is thrown, and nothing in the console warns you.

How duplicate IDs break CSS

CSS #id selectors are how you target a specific element by its ID and apply styles to it. You use them when you want to style one particular element on the page differently from everything else.

For example, if you have this heading in your HTML:

<h3 id="section-title">Pricing</h3>

You can style it in CSS like this:

#section-title { color: blue; font-size: 24px; }

The # symbol tells the browser “find the element with this ID and apply these styles to it.”

But this breaks down the moment you have two elements sharing the same ID. The browser was never built to handle that situation, so it simply styles whichever element it encounters first and moves on. So if both the Pricing and About Us headings share the same ID:

<h3 id="section-title">Pricing</h3> <h3 id="section-title">About Us</h3>

#section-title { color: blue; }

Only the Pricing heading turns blue. About Us gets nothing. No error is thrown, no warning appears, and the page still renders without complaint. You wrote one rule expecting it to style one specific element, and it does, just not necessarily the one you intended.

How duplicate IDs break accessibility

IDs are how assistive technologies navigate relationships between elements on a page.

When a screen reader encounters a form input, it looks for a linked label by following the ID reference. That reference is what tells the user what the field is for, what kind of input is expected, and any additional instructions or error messages attached to it.

A <label> element can be linked to an input using the for attribute, which matches the input’s ID. When a screen reader reaches the input, it automatically announces the linked label to the user.

<label for="email">Email address</label> <input type="email" id="email">

When a screen reader lands on this input, it announces: “Email address, edit text.”

This works because for and id form a one-to-one relationship. The browser expects the ID to be unique so it can find exactly the right input to pair with the label.

When two inputs share the same ID, that relationship breaks. The browser can no longer reliably determine which label belongs to which input, so the programmatic link that assistive technologies depend on falls apart. So if you have:

<label for="user-input">Email address</label> <input type="email" id="user-input"> 
<label for="user-input">Phone number</label> <input type="tel" id="user-input">

The browser links both labels to the first input it finds. A screen reader user tabbing through the form hears “Email address, edit text” for both fields. The phone number field is effectively mislabeled, and there is no visual sign that anything is wrong.

Which WCAG criteria do duplicate IDs violate?

Duplicate IDs violate two WCAG 2.1 criteria: 4.1.1 Parsing and 1.3.1 Info and Relationships.

4.1.1 Parsing (Level A) requires that HTML is written without duplicate attributes, including IDs. A page with duplicate IDs fails this criterion outright.

1.3.1 Info and Relationships (Level A) requires that relationships between elements, like a label and its input, are programmatically determined. When duplicate IDs break the link between a label and an input, that relationship can no longer be reliably communicated to assistive technologies, which is a direct failure of this criterion.

How to find duplicate IDs on your website

To find duplicate IDs on your website, you need a tool that can scan every page and find them. Manually checking each page one by one is time-consuming.

Tools like WebYes Accessibility are perfect for this. It scans every page, surfacing duplicate IDs alongside other accessibility issues across your entire site. You get a complete picture of where duplicate IDs exist, which pages are affected, and what needs to be fixed.

If you prefer a page-by-page check, the free Accessibility Checker Chrome extension can scan the page you are on and flag any duplicate IDs instantly, without any setup. It is the quickest way to check a page you are actively working on or debugging.

Alternatively, you can use other common audit tools such as the Nu HTML Checker, Screaming Frog, Semrush Site Audit, or Lighthouse.

What the error looks like in common audit tools

Duplicate IDs are flagged by every major audit tool, but each one uses slightly different wording.

Here is what to look for:

• Semrush Site Audit: reports this as “Duplicate IDs on page” or “Invalid HTML nesting and duplicate IDs” under the Errors or Warnings category in its HTML audit
• Nu HTML Checker (validator.w3.org): shows “Duplicate ID [value]” with the exact repeated value and the line number where it appears in the source
• Screaming Frog: flags “Duplicate ID attribute” in the Content tab, with a count of how many times the value appears on the page
• axe / Accessibility Checker: reports “Ensures every id attribute value is unique” with the rule ID duplicate-id; a stricter variant, duplicate-id-aria, catches IDs used in ARIA references specifically
• Lighthouse / Chrome DevTools: surfaces duplicate IDs under the Accessibility audit with the label “Document has elements with duplicate IDs”

If your tool is showing a message like “Fix invalid HTML nesting and duplicate IDs in resourcelist”, see the dedicated section below for a step-by-step fix for that specific error.

How to fix duplicate IDs on your site

The fix for duplicate IDs is straightforward: every ID on a page must be unique. If two elements need to share the same style, use a class instead. If two elements need to be targeted individually by JavaScript, give each one a distinct ID.

Once you have found them, fixing them is a simple naming change. Go to the flagged element, rename the ID to something unique, and update any CSS rules or JavaScript references that pointed to the old ID. That is all it takes.

For example:

<button id="subscribe-btn">Subscribe</button> 
<button id="contact-btn">Contact Us</button>

“Invalid HTML nesting” and “Duplicate IDs in resourcelist” meaning explained

If your site audit tool is reporting “Fix invalid HTML nesting and duplicate IDs in resourcelist,” you are seeing two overlapping issues flagged on the same page.

• Invalid HTML nesting means an element has been placed inside a parent that does not allow it — for example, a block-level element inside a <p>, or a <div> wrapped around an inline element in a context that requires inline content only.
• Duplicate IDs means at least two elements on the page share the same id value, which breaks JavaScript lookups, CSS targeting, and accessibility associations – all covered above.

The word “resourcelist” is how the auditing tool labels the page region where it found these issues.

Different tools use different names for page sections. “resourcelist” typically refers to a structured block of resources such as a navigation area, a widget group, a content list, or a set of CMS-generated components. It is the tool’s way of telling you where on the page to look, not a separate HTML error in itself.

Both problems often originate from the same place: a reusable component or CMS-generated widget that appears more than once on the page, where neither the HTML nesting nor the ID values were written to handle repetition.

How to fix it

1. Open the flagged page and use browser DevTools to inspect the source
2. Search the source for the duplicated ID value. Ctrl/Cmd + F in the Elements panel works well
3. Check whether the duplicate comes from a component, a plugin, or a CMS template block; this tells you where to apply the fix
4. Rename the duplicate ID to a unique value, then update any CSS rules or JavaScript references that pointed to the old ID
5. Fix any invalid HTML nesting in the same element; move the misplaced element to a valid parent
6. Re-run your site audit to confirm both errors are cleared

If the same component generates this error across multiple pages, fix it at the component or template level rather than page by page. A one-line fix at the source removes the error everywhere it appears.

Wrapping up

Duplicate IDs are a structural problem, not a cosmetic one.

They break JavaScript silently, disconnect form labels from inputs, and cause ARIA relationships to resolve against the wrong element.

The fixes are straightforward: unique IDs, updated references, and dynamic generation in reusable components. But they must be applied at the source, not patched instance by instance.

Run a full-site scan using tools like WebYes Accessibility to find every occurrence, fix the component that generates them, and re-validate to confirm the result.

FAQs on duplicate IDs