<label>: The LABEL Element
Last updated: 2026-10-13
<label>The LABEL Element
The <label> element defines a caption for a form control. The for attribute links it to the control's id; clicking the label focuses/activates the control, improving accessibility and touch experience.
| Category | Forms |
|---|---|
| Content Model | Phrasing content (no nested <label>) |
| Allowed Parents | Any element that accepts phrasing content |
| Content Tag | Yes — requires closing </label> tag |
| Status | Standard |
📝 Syntax
<label for="username">Username:</label>
<input type="text" id="username">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
for | Element ID | The ID of the associated form control. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <label> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
❓ FAQ
QWhat does the for attribute on label do?
A
for points to the input's id to create an explicit association: clicking the label text focuses or toggles the input, and screen readers announce the label as the input's name. Syntax: <label for='email'>Email</label><input id='email'>.QIf label wraps the input, is for still needed?
ANo. A wrapping label is an implicit association and needs no for/id — but one label can only wrap one control. Implicit association is awkward for complex layouts where labels sit apart from controls; explicit for is more flexible. Do not mix both methods on the same control.
QCan label contain headings or links?
AIt should not contain headings (h1-h6) or interactive elements (links, buttons). The label's semantics are the control's name; nested interactive elements cause click conflicts and confused screen-reader announcements. Put auxiliary text outside, or link it with aria-describedby.
🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
