Search code examples
htmllabelw3c

Can a label only refer to input elements?

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?

<!doctype html>
    <html>
        <head>
             <title>Example document</title>
        </head>
        <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?

Solution

  • According to the W3C it applies to Form Controls, and Form Controls are defined as:

    • Buttons
    • Checkboxes
    • Radio buttons
    • Menus
    • Text input
    • File select
    • Hidden controls
    • Object tags

    So FireFox is technically right, although I'd hardly consider it to be "breaking" if a browser didn't restrict it to those elements.