The <label> element
The <label> tag gives a form control a visible name, such as “Email” next to an email field. Connect it with the for attribute, matching the field’s id, or by wrapping the field inside the label. Clicking the label then focuses or ticks the field, and screen readers read the label aloud.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, interactive content, palpable content |
| Content model | Phrasing content, but no other <label> and no labelable control other than the one it labels |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content (usually inside a <form>) |
| DOM interface | HTMLLabelElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| for | The id of the form control this label belongs to. Not needed if the control is inside the label. |
Common examples
A label linked with for and id
The label’s for matches the field’s id. Clicking the label now focuses the field.
A bigger click target for checkboxes
Wrapping a checkbox in its label makes the whole text clickable — much easier to hit on a phone.
A label that is hidden on screen
A search box next to a magnifying-glass button may not need visible text, but screen readers still need a label. Hide it visually instead of removing it.
Marking required fields
Add a visual marker to the label and the required attribute to the field. Explain what the asterisk means once at the top of the form.
<label> vs aria-label
Both give a form field a name that screen readers announce, but a <label> is visible text on the page while aria-label is an invisible attribute. A visible label helps everyone: sighted users know what to type, the click target gets bigger, and people using voice control can say “click Email” because they can see the word.
Use aria-label only where visible text truly doesn’t fit, such as an icon-only button. Even then, a visually hidden <label> is often just as easy and works in more situations.
| <label> | aria-label | |
|---|---|---|
| Visible on page | Yes | No |
| Clicking focuses the field | Yes | No |
| Best for | Every form field | Icon-only buttons |
Common mistakes to avoid
forthat doesn’t match anid. A typo breaks the link silently. Theforvalue must exactly match the field’sid, including capital letters.- One label for several fields. Each field needs its own label; for a group such as a date split into day, month and year, use a <fieldset> with a
<legend>. - Empty or vague labels. “Field 1” or a lone “*” tells nobody what to type.
- Duplicate ids. If two fields share an id, both labels point at the first one and the second field is left unnamed.
Accessibility & SEO tips
- Labels enlarge the clickable area of small controls like checkboxes and radio buttons, which helps people with shaky hands and touch screens.
- Keep label text short and specific (“Work email”, “Phone number”), and put extra help in a hint linked with
aria-describedby. - Only hide labels when the field’s purpose is obvious from its surroundings, such as a search box next to a “Search” button.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to make a contact form, HTML forms tutorial