The <label> element gives a form field its accessible, clickable name — arguably the single most impactful, most commonly skipped detail in form accessibility.
Syntax
<label for="fieldId">Field Name</label>
<input type="text" id="fieldId">Basic Example
<label for="email">Email Address</label>
<input type="email" id="email" name="email">Browser output: ordinary-looking text next to the field — but clicking that text moves focus into (or toggles, for a checkbox) the field, because the two are explicitly connected.
How It Works
There are two valid ways to connect a label to its field:
<!-- Method 1: for/id pairing (most common) -->
<label for="name">Name</label>
<input type="text" id="name">
<!-- Method 2: wrapping the input directly -->
<label>
Name
<input type="text">
</label>Both are valid HTML5 and both produce the same accessible connection — the for/id method is more common because it doesn't require nesting the field inside the label's own markup.
Important Attributes
| Attribute | Purpose |
|---|---|
for | Must exactly match the target field's id |
Real-World Example
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Send me weekly course updates</label>On a checkbox specifically, a correct label association means clicking the text itself toggles the box — a much larger, easier target than the tiny checkbox square alone.
Common Mistakes
- Placing label-like text near a field with no real
<label>element at all — visually identical, but completely invisible to assistive technology - A
forvalue that doesn't exactly match the field'sid(a typo, mismatched casing) — this silently breaks the connection entirely - Using
placeholdertext as a substitute for a real label — see placeholder for why this fails
Best Practices
- Give every single form field a real, correctly connected
<label>, with no exceptions - Double-check that
forandidmatch exactly, including case
Accessibility Considerations
This entire topic is accessibility — an unlabeled field is one of the single most common, most damaging form accessibility failures on the web, making it genuinely unclear (or entirely silent) to a screen reader what a field is even asking for.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
The expanded click target from a correctly associated label is a real usability benefit for every user, not just those using assistive technology — it's simply easier to hit a sentence of text than a tiny checkbox.
Mini Practice
- Fix a form field that has visually adjacent text but no real
<label>element. - Build a labeled checkbox and confirm that clicking the label text toggles it.
