---
name: thedaviddias/unique-id
source: https://app.decimal.ai/s/thedaviddias-unique-id@1/SKILL.md
source_sha256: 19abb8d64a2d
---

# Ensure all IDs are unique

Duplicate IDs break form accessibility (labels don't connect), ARIA relationships fail, and JavaScript getElementById returns wrong elements—causing silent bugs.

## Quick Reference

- Each ID must appear only once per HTML document
- Use classes for styling, IDs for unique anchors/references
- Check for duplicates introduced by component libraries
- Duplicate IDs break form labels, ARIA, and getElementById

## Check

Scan this HTML document to ensure all ID attributes are unique across the entire page and properly reference related elements.

## Fix

Remove duplicate ID values, ensure each ID is used only once per page, and update any references like labels, ARIA attributes, or JavaScript selectors.

## Explain

Explain why unique IDs are essential for HTML validity, accessibility (form labels, ARIA), JavaScript functionality, and CSS styling.

## Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Ensure all IDs are unique. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/html/unique-id