HTML Id
An id identifies one element within a document. Fragment links, labels, scripts, and accessibility attributes can refer to it, so a duplicate can break more than a CSS rule.
How it works
- Keep every id unique on the page and avoid whitespace. A descriptive identifier such as signup-email is easier to maintain than an unexplained number.
- A label for value must match the id of its associated form control. An aria-describedby value can identify supporting explanatory text.
- Use classes for repeated styling. IDs are useful for specific relationships and fragment destinations, not as a substitute for a component system.
A practical example
<label for="signup-email">Email address</label>
<input id="signup-email" name="email" type="email" aria-describedby="email-help">
<p id="email-help">We use this address for workshop updates.</p>
The label names the control and the help text provides a separate description. The three identifiers describe distinct roles in the document.