Is there a difference between the FreeCodeCamp rendering engine and other live html editors?

These are the FreeCodeCamp instructions to create 3 checkboxes. It requires you to place each input tag in it’s own label tag

 <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

image

When I remove the individual label tag from each input tag on another html editor (codepen.io) I get the same result, although free code camp gives me an error. (See code).

Q: So what’s the write way to use the tag? Does every single checkbox or radio button option need to come with its own label tag?

 <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving

You don’t get the same results. One has correct labels and the other does not.

You can’t see the label, but it is an important piece that you’ll learn more about as you go along.