How to Fix Duplicate HTML IDs

An HTML id identifies one element on a page. Reusing the same ID can cause scripts, labels, fragment links, and assistive technology to target an unexpected element.

Why it matters

• Form labels may not point to the intended field.
• JavaScript may act on the wrong element.
• Links to a specific section may behave inconsistently.

Example of the problem

<input id="email" type="email">
<input id="email" type="text">

How to fix it

1. Use the audit evidence to identify the repeated ID and affected elements.
2. Give each element a unique ID.
3. Update matching label for attributes, scripts, CSS selectors, and fragment links.
4. Test the affected form or page interaction after publishing.
5. Run the audit again to confirm the duplicate is gone.

Corrected example

<label for="email">Email</label>
<input id="email" type="email">
<label for="phone">Phone</label>
<input id="phone" type="tel">

If a theme, plugin, or page template generates the duplicate, you may need to update that component or ask its developer. Check the evidence before editing your site.