Adam Hughes Adam Hughes - 3 years ago 55
HTML Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download