W3Schools have this to say about labels:
The
<label>tag defines a label for an input element. [Emphasis mine]
Does this mean that the following HTML isn't valid?
<html>
<body>
<label for="x">Label</label>
<hr>
<div id="q" contentEditable="true">Hello</div>
<hr>
<div id="x" contentEditable="true">World</div>
</body>
</html>
Both Chrome and IE8 give focus to World when Label is clicked, Firefox does not.
Which is correct?
I would say it was not an appropriate use of the markup, because label semantics are that they are specifically for controls.
The LABEL element is used to specify labels for controls that do not have implicit labels,
The HTML spec says, about label's "for" attribute, "When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents."
So the id references in "for" should be that of a control. What's a control? The spec basically says any input is a control, as is button, select, or object. So Firefox is technically right -- a div is not a control.
According to the W3C it applies to Form Controls, and Form Controls are defined as:
So FireFox is technically right, although I'd hardly consider it to be "breaking" if a browser didn't restrict it to those elements.