About This HTML Issue
The HTML specification defines <label> as an element whose content model allows phrasing content but explicitly excludes other <label> elements. When you nest one <label> inside another, browsers cannot determine which form control each label is meant to describe. This breaks the fundamental purpose of the <label> element—providing a clear, one-to-one association between a text description and its corresponding form control.
This issue matters for several reasons:
-
Accessibility: Screen readers rely on the
<label>element to announce the purpose of form controls. Nested labels create confusion about which label text belongs to which input, making forms difficult or impossible to navigate for users of assistive technology. -
Usability: Clicking a
<label>should focus or activate its associated control. Nested labels create overlapping click targets with unpredictable behavior. -
Standards compliance: The WHATWG HTML living standard explicitly states that
<label>elements must not be nested, and validators will flag this as an error.
This error commonly occurs in a few situations: accidentally duplicating closing tags, wrapping a complex form group in a <label> when a <fieldset> would be more appropriate, or using a templating system that inadvertently produces nested labels.
Examples
❌ Nested labels (invalid)
<label>
Full Name
<label>
First Name
<input type="text" name="first-name">
</label>
</label>❌ Extra closing tag causing a parser issue
A stray closing </label> tag can sometimes cause the browser’s error recovery to produce unexpected nesting:
<label>Name</label></label>
<label for="email">Email</label>
While the extra </label> is the root problem here, some parsers and validators may interpret this as a nesting issue. Always ensure your opening and closing tags are properly matched.
✅ Separate labels for separate inputs
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name">✅ Using implicit label association (one label per input)
<label>
First Name
<input type="text" name="first-name">
</label>
<label>
Last Name
<input type="text" name="last-name">
</label>
✅ Grouping related controls with <fieldset> instead of nesting labels
If you need to group multiple labeled inputs under a shared heading, use a <fieldset> with a <legend> instead of wrapping labels inside a label:
<fieldset>
<legend>Full Name</legend>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name">
</fieldset>
This approach provides the grouping semantics you need while keeping each <label> correctly associated with a single form control. The <legend> serves as the group-level description, and each <label> describes its individual input—giving both sighted users and assistive technology users a clear understanding of the form structure.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.