Question

is it valid html under html5 definitions to use a label’s “for” value as an id of a normal div element (for example I have made a custom dropdown list implementation which is encased inside a div)

Please let me know if possible,

Thomas

Answer 1

Not according to the spec:

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 the type attribute is not in the hidden state) “keygen”
“meter” “output” “progress” “select” “textarea”

http://www.w3.org/TR/html5/forms.html#category-label

See also:

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 Document as the label element. If the attribute is specified and
there is an element in the Document whose ID is equal to the value of
the for attribute, and the first such element is a labelable element,
then that element is the label element’s labeled control.

http://www.w3.org/TR/html5/the-label-element.html#attr-label-for

I do think the question presents a valid use case. I’m not sure what the recommended pattern is for such a scenario, though ARIA attributes might help to make the markup more accessible:

https://developer.mozilla.org/en/Accessibility/ARIA/forms/Basic_form_hints
https://developer.mozilla.org/Special:Tags?tag=ARIA