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

HTML-CSS
#1

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
#2

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.

#3

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:-

image
image1918×506 39.5 KB

#4

They look the same, but like I said…

The label is important and required in this challenge

#5

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.

#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.