HTML tags inside <label>

html nested label
SaltyNuts picture SaltyNuts · Dec 16, 2010 · Viewed 71.8k times · Source

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

Answer

Tatu Ulmanen picture Tatu Ulmanen · Dec 16, 2010

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

Related questions

How do you overcome the HTML form nesting limitation?

I know that XHTML doesn't support nested form tags and I have already read other answers here on Stack Overflow regarding this subject, but I still haven't figured out an elegant solution to the problem. Some say you don't need …

Read More
List of HTML5 elements that can be nested inside P element?

I am trying to figure all the valid HTML5 elements that can be nested inside paragraph elements such that w3 validator doesn't show any errors. I mean I am trying to figure all tags that can replace the dots in …

Read More
How to separate styles in a nested list styling?

I have a list and list also has list in it. I set styles on parent list but I want different styles for parent and child list but they are mixed somehow I can't separate them. HTML file: <ul …

Read More