Freecodecamp: <em> is italicizing for some reason with this code

[dizadi]

Challenge Change Text Inside an Element Using jQuery has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target4").html("<em> #target4 </em>");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

[raisedadead]

Thanks for the report.

The spaces in between your code are causing the challenge to fail, well this should be fixed in the tests.

And to clear your confusion with the difference between <i> and <em>, check this:
https://developer.mozilla.org/en/docs/Web/HTML/Element/em

Tagging as help wanted.

/cc @freeCodeCamp/moderators should we add the link to clarify the difference, while updating the test to allow spaces?

[ajain17]

@raisedadead I think test should allow spaces (since we are testing whether the user knows how to use the functionality rather than the particular text they are using).

Also, this challenge won't be the right place to differentiate between <i> and <em> in my opinion. I will work on fixing the test if needed. Let me know.

[erictleung]

@raisedadead I like the idea of talking a little bit about the difference between <i> and <em>. I've seen couple issues here and there about people wanting to change it so it would be nice to clarify to those who are confused.

[raisedadead]

Yup, I agree that a clarification is required, may be just adding a MDN link should suffice.

[ajain17]

Should I just add this link https://developer.mozilla.org/en/docs/Web/HTML/Element/em ?

[raisedadead]

Yes please, maybe a one liner something along the lines of:
Check this [link](< path to MDN>) to know more on the difference between <i> and <em> and their uses

[ajain17]

ok. I will work on this

[ajain17]

Update: I got busy with other 2 PRs. will work on this today.