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?
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.