As you know, it is not allowed to nest label
elements, as label
has the following content model:
Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant
label
elements.
HTML5 defines what happens when a user activates interactive content:
Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a
click
event, as described below.
Step 3 of "When a pointing device is clicked" says:
Let e be the nearest activatable element of the element designated by the user (defined below), if any.
To find the nearest activatable element, an algorithm is defined:
- If target has a defined activation behavior, then return target and abort these steps.
- If target has a parent element, then set target to that parent element and return to the first step.
- Otherwise, there is no nearest activatable element.
This section doesn’t explicitly include the case of an invalid nesting of interactive content. I’m not sure if this algorithm also applies for invalid code (probably not). But if it would apply, only the inner label
should fire.