HTML / Element / Initial coverage

The `<label>` Element

Status: Initial coverage Scope: HTML Living Standard Checked: 2026-09-12

Technical Summary

The label element represents a caption for a form control in a user interface. It can be associated with a particular labelable control explicitly with for, or implicitly by placing the control inside the label.

The association is more than visible text. Inspect labelable-element classification, ID resolution within the same tree, label activation behavior, DOM APIs, and accessible-name computation as separate boundaries.

Definition / Categories

Basic structure of the label element in the HTML Standard
Item	Specification summary
Categories	Flow content, phrasing content, interactive content, and palpable content
Context	Where phrasing content is expected
Content model	Phrasing content, with no descendant labelable elements except the labeled control and no descendant `label` elements
Tag omission	Neither the start tag nor the end tag is omissible
Content attributes	Global attributes and `for`, which identifies a form control
DOM interface	`HTMLLabelElement`

A label is not a generic heading for any element. It targets labelable form controls, must not contain nested labels, and should not leave the labeled control ambiguous.

Labelable elements

The following are the main HTML elements that can be labelable. The input element is labelable except in the Hidden state.

Representative labelable elements
Element	Boundary to inspect
`button`	A button labeled by its descendant content; it is also form-associated
`input`	All states except Hidden; the type state changes input, selection, submission, and validation behavior
`meter` / `output` / `progress`	Form-associated elements whose label relationship should be considered with their value or result semantics
`select` / `textarea`	Selection and multiline-input controls whose accessible name and target need to be identified
Form-associated custom element	A form-associated custom element can be labelable; inspect its ElementInternals and label relationship together

div, p, and an ordinary span are not labelable form controls. Pointing for at one of them does not make it the label's labeled control.

Determining the labeled control

Explicit association with for

<label for="email">Email address</label>
<input id="email" name="email" type="email">

When for is present, its value must be the ID of a labelable element in the same tree as the label. If matching IDs exist, the first matching element in tree order must be labelable for it to become the label's labeled control.

Implicit association through a descendant

<label>
  Email address
  <input name="email" type="email">
</label>

When for is absent and the label has a labelable descendant, the first labelable descendant in tree order is the labeled control. The content model does not permit additional ambiguous labelable descendants or nested label elements.

Content model / ID boundaries

An explicit association is not just a string comparison. Check these conditions together:

The for value matches the target element's id.
The label and target are in the same tree.
The first matching element in tree order is labelable.
The page does not reuse the id, so the intended target is unambiguous.

A label is not a form-owner mechanism. Its form IDL attribute returns the form owner of its associated control when that control is form-associated; this does not mean that the label itself has a form content attribute.

Activation behavior

The exact default presentation and behavior of a label, especially its activation behavior, is specified as matching the platform's label behavior. Depending on the platform, clicking a label may focus the control or cause a click event on it. Do not generalize this as “a label always toggles the control.”

For events targeted at interactive content descendants of a label, and descendants of those interactive descendants, the label's activation behavior is to do nothing. Putting a link or another button inside a label is therefore an unsafe structure because it creates competing interaction targets.

DOM interface

The label element is exposed through HTMLLabelElement.

const label = document.querySelector('label');
label.control; // labeled control or null
label.form;    // control's form owner or null
label.htmlFor; // reflected for content attribute

control returns the label's labeled control, or null when there is none.
form returns the form owner of the labeled control when it is form-associated; otherwise it returns null.
htmlFor is the reflected, writable IDL attribute for the for content attribute.

Relationship with accessible names

The label association is a native source of an accessible name for form controls. HTML-AAM describes using the text equivalent of associated label subtrees when higher-priority authoring such as aria-label or aria-labelledby has not supplied the name. The exact computation depends on the control type, multiple labels, and whether the control is encapsulated by its label.

A placeholder, nearby visual text, or CSS ::before content is not a replacement for associating a real label with the control.

Fact / Evidence

Key facts are mapped to their conditions, review status, and evidence locations. Implementation observations remain separate in the Implementation Evidence register.

Key facts and evidence locations
Type	Fact	Condition / Scope	Status	Evidence
SPEC	The `label` element represents a caption for a form control and can be associated with a labelable control.	When checking its meaning, categories, content model, and association.	Reviewed	HTML Standard: the label element
SPEC	With `for`, the same-tree ID target becomes the labeled control when the first matching element in tree order is labelable.	When evaluating `for`, `id`, same-tree scope, duplicate IDs, and labelability together.	Reviewed	HTML Standard: labeled control
SPEC	Without `for`, the first labelable descendant in tree order becomes the labeled control.	When checking implicit association and the label content model.	Reviewed	HTML Standard: implicit label association
SPEC	The exact default presentation and activation behavior of a label follows the platform's label behavior.	When checking user activation, the labeled control, and interactive descendants.	Reviewed	HTML Standard: label activation behavior
SPEC	`HTMLLabelElement` exposes `control`, `form`, and `htmlFor`.	When retrieving the labeled control, its form owner, or the reflected `for` value.	Reviewed	HTML Standard: HTMLLabelElement
AAM	The text equivalent of associated label subtrees can contribute to a form control's accessible name under the applicable computation.	Control type, `aria-label` / `aria-labelledby`, multiple labels, and label encapsulation.	Reviewed	HTML-AAM: Accessible Name Computations

Evidence

HTML Standard: The label element — meaning, categories, content model, for, labeled control, activation behavior, and DOM interface
HTML Standard: labelable elements — the set of labelable form-associated elements
HTML Accessibility API Mappings — accessible-name computation involving associated labels
Web Platform Tests — mapping target for label association, activation, DOM API, and accessibility tests

Implementation Evidence

Implementation observations are recorded separately from normative claims. Unrun items are not treated as reviewed.

Shared fixture / record: Inside <form id="evidence-form" method="get">, the fixture includes an input with no type, explicit for/id association, implicit association with an input inside a label, required, disabled, and submit plus type-omitted button controls. Environment: Chrome 152.0.0.0 (Windows NT 10.0) / checked 2026-09-12.

Implementation evidence register for the label element
Type	Reproducible scope	Record required	Status
IMPL	Explicit `for`/`id` association, implicit descendant association, label click focus, and control API	Checked with the shared fixture in Chrome 152.0.0.0 / Windows NT 10.0. Explicit and implicit inputs each had `labels.length=1`; after clicking the explicit label, `activeElement.id` was `explicit-input`.	Reviewed (one Chrome)
WPT	Labelable elements, same-tree association, activation, and HTMLLabelElement	Mapped candidates: `labelable-elements.html`, `forward-focus-to-associated-element.html`, and `clicking-interactive-content.html`. On 2026-09-15 in Chrome 152.0.0.0 / Windows NT 10.0, all three selected files passed 68/68 on wpt.live. Unselected WPT coverage and other browsers remain open.	Partial (68/68 pass)
AAM	Browser AX observations of accessible names from associated labels and disabled state	In the same fixture's accessibility tree, explicitly and implicitly labelled inputs appeared as text fields named “Explicit name” and “Implicit email”; the disabled field appeared with a disabled state.	Observed (Chrome AX)

Use the WPT repository for test mapping and HTML-AAM for accessibility criteria.

Coverage / Open Issues

ReviewedThe label meaning, categories, content model, labelable elements, and the basic for/id and implicit associations
ReviewedLabeled-control resolution, the platform boundary of activation behavior, and the main HTMLLabelElement APIs
ReviewedThe HTML-AAM entry point for associated labels and form-control accessible names
OpenBrowser-specific focus, click, and default-presentation behavior, plus form-associated custom-element implementation differences
OpenExact WPT mapping, platform accessibility trees, assistive-technology observations, and historical changes

This is initial coverage. It does not claim that all label-related form processing, accessibility implementations, or browser differences have been verified.

Related surface

For a beginner-friendly explanation of for and id, wrapping a control, and labeling form fields, see the label element page in Yugien. For control states, see the input element; for submission and form owners, see the form element; and for a labelable button, see the button element.

The <label> Element