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

[robinshajijoseph]

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>

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

[JeremyLT]

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.

[robinshajijoseph]

@robinshajijoseph

<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

I copy/pasted the above two code snippets in the following live html editors with the exact same results.

1. htmledit.squarefree
2. codepen
3. w3schools

The image below is a screenshot of the two scripts one after the other with their corresponding output in the w3schools html editor:-

[JeremyLT]

They look the same, but like I said…

@JeremyLT

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

The label is important and required in this challenge

[kinome79]

Actually, the label tag is the thing in the front, <label for="loving"> … so both of your examples are using a label tag… whats missing in your second example is the closing tag for those labels </label>… that is definitely an error, but html is a very flexible language and can sometimes recover from such errors. Take your last line for example.

<p>My first paragraph.</p> - That is correct… but if you type:

<p>My first paragraph. - That is incorrect… but it will still render seemingly the same.

But rest assured it is incorrect, and as your pages get more complex, those types of mistakes or leaving those out will have undesireable affects and bugs that may ruin your page.