Search code examples
htmlvalidationsemantics

Is using a HTML Label to wrap elements semantic?


I'm considering using a label to wrap a h3 and a p tag. In my mind this makes sense as the label has a heading and description and both relate to the input. However I can't seem to find any info in the spec on whether this can be done.

Here is an example:

<label for="test1">
    <h3>Label Heading</h3>
    <p>Label Description</p>
</label>

<input id="test1" name="test" type="radio"/>

If it's not does anyone have a better suggestion?


Solution

  • Pasting the following code in the W3 HTML Validator yields two errors

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test</title>
        </head>
        <body>
            <label for="test1">
                <h3>Label Heading</h3>
                <p>Label Description</p>
            </label>
            <input id="test1" name="test" type="radio"/>
        </body>
    </html>
    

    Element h3 not allowed as child of element label in this context.

    Element p not allowed as child of element label in this context.

    So this code is rather invalid.

    I would also say that is semantically "invalid" (or at least weird), because I think of a label as a description for the input box, and a heading does not fit there.