W3Schools have this to say about labels:
The
tag defines a label for an input element. [Emphasis mine]<
The latest WhatWG spec has this to say:
Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.
button
,input
(if thetype
attribute is not in the Hidden state),meter
,output
,progress
,select
,textarea
...
The
for
attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same tree as thelabel
element.
(Source: https://html.spec.whatwg.org/multipage/forms.html.)
In other words, the standard only allows for
attributes to point at elements of one of the 7 tag types listed above. The HTML exhibited in the question (which uses a for
element to point to an editable div
) is therefore technically invalid HTML under the current spec.
The Nu Html Checker (which is endorsed by WhatWG) agrees; if you ask it to validate the HTML document from the question, it will say:
Error: The value of the
for
attribute of thelabel
element must be the ID of a non-hidden form control.