HTML tags inside <label>

I have a table in a page that consists of checkboxes in the cells on the left and descriptions in the cells on the right. The "description" contains h4 headers and plain text. I want to make that whole description (everything ins开发者_运维问答ide <td></td>) a label.

So each row looks like this:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><label for="i1">
<h4>Some stuff</h4>more stuff..
<h4>Some stuff</h4>more stuff..
</label>
</td></tr>

This does not work however, the text does not act like a label and is not clickable. I'm using Firefox 3.6 to test it. If I remove <h4> tags it starts working, but that complicates formatting. Is there something about <h*> tags that prevents <label> from working correctly?

Block level elements (to which h4 belongs) are not allowed inside inline elements, and will cause undefined behaviour. You can use span elements instead.

Only inline elements (except other label elements) may appear inside label elements.

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

— http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

It doesn't make sense to put headings there anyway.

The <label> element in HTML is an inline level element and cannot contain block level elements.

This is probably what's causing your issues. Alternatively you can put your labels inside the <h4>'s :

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><
<h4><label for="i1">Some stuff</label></h4>more stuff..
<h4><label for="i1">Some stuff</label></h4>more stuff..
</label>
</td></tr>

Here on MDN they explain exactly why NOT to use headings inside a label tag:

Placing heading elements within a interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the element instead.