Freecodecamp: Why challenges didn't include / on self closing html element like link and img

Created on 6 May 2016 · 4Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Add Images to your Website has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat.jpg" />
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Source

ReactorboY

Most helpful comment

Closing slashes on void elements is a holdover from XHTML (and is unfortunately required in JSX) but generally discouraged when writing HTML5. It's not something we should bar people from doing but it's definitely not a pattern we'll be switching our examples to. Thanks and happy coding!

ltegman on 6 May 2016

👍3

All 4 comments

Hello - are you saying that it should flag the fact that the trailing slash was used? Or that it should have been used? It seems that it is no longer supported in HTML5? Or at least no longer required - XHTML 1.0 required it, at least for an empty element. (I'm not an expert - just looking at various sources.)

I guess that I'm trying to clarify what you are asking? Thanks!

khaduch on 6 May 2016

@ReactorboY thanks for the issue. They do seem odd now that I look at it. However, with a little Googling, it appears that the / is not necessary for elements like img and link because they are considered "void elements", which apparently don't require the / character.

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

cc/ @FreeCodeCamp/issue-moderators