Interactive content inside <label> tag in html?

Question

In Mozilla html tutorial it says

Don't place interactive elements such as anchors or buttons inside a label. Doing so will make it difficult for people to activate the form input associated with the label.

Don't

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Do

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

I tried both and can't find any serious problem with the first usage, what does "make it difficult for people to activate the form input associated with the label" exactly mean?

Answer 1

If you click on the link in the "Don't" example, you'd be taken to that page before you've had a chance to submit the form on the page that link and the checkbox were in. (Though, I guess, technically, you've still managed to activate the checkbox...)

HTML doesn't actually stop you from putting links inside labels though. But it does stop you from putting other form controls inside labels, particularly if they have an ID and the label has a for attribute that's trying to point to another control (since a label can only be associated with one control at a time).